| license: mit |
This example shows how to resort the nodes of the tree and how to provide a convertTypes function that converts the columns size1, size2, size3 to numeric types.
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"> | |
| level1;level2;level3;size1;size2;size3;color | |
| Eve;Cain;;1;2;4;rgb(100 23 80) | |
| Eve;Seth;;3;2;4;rgb(100 23 80) | |
| Eve;Seth;Enos;3;2;4;rgb(100 23 80) | |
| Eve;Seth;Noam;3;2;4;rgb(100 23 80) | |
| Eve;Abel;;32;2;4;rgb(100 23 80) | |
| Eve;Awan;Enoch;3;2;4;rgb(100 23 80) | |
| Eve;Azura;;5;2;4;rgb(100 23 80) | |
| Peter;;;3;2;4;rgb(100 23 80) | |
| </aside> | |
| <script> | |
| const dataSpec = { | |
| source: "aside#data", | |
| hierarchyLevels: ["$", "level1", "level2", "level3"], | |
| delimiter: ";", | |
| convertTypes: d => { | |
| return { | |
| level1: d.level1, | |
| level2: d.level2, | |
| level3: d.level3, | |
| size1: +d.size1, | |
| size2: +d.size2, | |
| size3: +d.size3, | |
| color: d.color, | |
| }; | |
| }, | |
| }; | |
| const myChart = d3.indentedTree(dataSpec) | |
| .linkLabel("size1") | |
| ; | |
| showChart(myChart); | |
| window.setTimeout(function() { | |
| myChart.nodeSort("size1"); | |
| }, 2000); | |
| function showChart(_chart) { | |
| d3.select("body") | |
| .append("div") | |
| .attr("class", "chart") | |
| .call(_chart); | |
| } | |
| </script> | |
| </body> | |
| </html> |