This example shows how to resort the nodes of the tree. When disabling convertTypes, the columns become strings and thus affecting the sorting order. The sorting order can be also parametrized by
ascending: true
(default is false)sortByHeight: true
(default is false). Now the sorting is done for each group based on the height of the node.The height of a node is the greatest distance from any descendant leaf.
Acknowledgements:
xxxxxxxxxx
<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",
convertTypes: "none",
};
const myChart = d3.indentedTree(dataSpec)
.linkLabel("num")
;
showChart(myChart);
window.setTimeout(function() {
myChart.linkWidth(100).nodeSort("num", { "ascending": true, "sortByHeight": true});
}, 2000);
function showChart(_chart) {
d3.select("body")
.append("div")
.attr("class", "chart")
.call(_chart);
}
</script>
</body>
</html>
Updated missing url https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js to https://cdn.jsdelivr.net/gh/ee2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js
https://d3js.org/d3.v6.min.js
https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/dist/latest/d3-indented-tree.min.js