| license: mit |
This example shows how to set the the node image based on adding SVG elements. The expanded nodes are shown with a green circle. If the node is collapsed, it changes to a red circle.
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> | |
| <!-- paste data in aside tag --> | |
| <aside id="data"> | |
| key,parent,size,weight,color | |
| Eve,,3.45,25,yellow | |
| Cain,Eve,4.647,20.3,black | |
| Seth,Eve,3,20.3,steelblue | |
| Enos,Seth,4,3000,orange | |
| Noam,Seth,50000,30,green | |
| Abel,Eve,4,30,brown | |
| Awan,Eve,3,30,deeppink | |
| Enoch,Awan,7,30,blue | |
| Azura,Eve,2,30,red | |
| </aside> | |
| <script> | |
| appendNodeSVG = function (selection) { | |
| selection.append("circle") | |
| .attr("r", 7.5) | |
| .style("fill", function (d) { | |
| return d._children ? "red" : "green"; | |
| }); | |
| }; | |
| updateNodeSVG = function (selection) { | |
| selection.select("circle") | |
| .style("fill", function (d) { | |
| return d._children ? "red" : "green"; | |
| }); | |
| }; | |
| const dataSpec = { | |
| source: "aside#data", | |
| }; | |
| const myChart = d3.indentedTree(dataSpec) | |
| .margin({top: 50, right: 10, bottom: 20, left: 50}) | |
| .nodeImageSelection(appendNodeSVG, updateNodeSVG) | |
| .linkLabel("weight", {unit: " Euro", format: ",.2f", locale: "DE"}) | |
| .linkWidth("weight",{range: [100, 300]}) | |
| .linkHeight(40) | |
| ; | |
| showChart(myChart); | |
| window.setTimeout(function() { | |
| myChart.linkWidth("size").linkLabel("size"); | |
| }, 2000); | |
| function showChart(_chart) { | |
| d3.select("body") | |
| .append("div") | |
| .attr("class", "chart") | |
| .call(_chart); | |
| } | |
| </script> | |
| </body> | |
| </html> |