This example shows how to resort the nodes of the tree.
- for documentation, go to https://github.com/EE2dev/d3-indented-tree
- for other examples, go to https://github.com/EE2dev/d3-indented-tree#examples
Acknowledgements:
license: mit |
This example shows how to resort the nodes of the tree.
Acknowledgements:
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<script src="https://d3js.org/d3.v6.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js"></script> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.css"> | |
</head> | |
<body> | |
<!-- for local processing without web server, paste data inside the aside tag --> | |
<aside id="data"> | |
name,parent,num,tex | |
Eve,,2,a | |
Cain,Eve,33,b | |
Seth,Eve,3,c | |
Enos,Seth,4,d | |
Noam,Seth,5,e | |
Peter,Seth,9,j | |
Georg,Seth,1,k | |
Abel,Eve,4,f | |
Awan,Eve,3,g | |
Enoch,Awan,7,h | |
Azura,Eve,2,i | |
</aside> | |
<script> | |
const dataSpec = { | |
source: "aside#data", | |
key: "name", | |
}; | |
const myChart = d3.indentedTree(dataSpec) | |
.linkLabel("num") | |
; | |
showChart(myChart); | |
window.setTimeout(function() { | |
myChart.linkWidth(100).nodeSort("num"); | |
}, 2000); | |
function showChart(_chart) { | |
d3.select("body") | |
.append("div") | |
.attr("class", "chart") | |
.call(_chart); | |
} | |
</script> | |
</body> | |
</html> |