| license: mit |
This example shows how to set the color of the links based on values of the column name with myChart.linkColor(). A color scale is defined to map the values to colors. The column name is passed as the first attribute. The second attribute ist an options object where the scale property is set.
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"> | |
| </aside> | |
| <script> | |
| const dataSpec = { | |
| source: "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/flare.json", | |
| key: "name", | |
| }; | |
| const colorScale = d3.scaleOrdinal() | |
| .domain(["flare", "graph", "animate", "cluster", "optimization", "HierarchicalCluster"]) | |
| .range(['black', 'deeppink', 'green', 'yellow', "blue", "yellow"]) | |
| .unknown("lightgrey"); | |
| const myChart = d3.indentedTree(dataSpec) | |
| .propagateValue("size") | |
| .linkColor("name", {scale: colorScale}) // passing a function for setting a dynamic link color | |
| .linkStrength(8) | |
| ; | |
| showChart(myChart); | |
| window.setTimeout(function() { | |
| myChart.linkWidth(100); | |
| }, 2000); | |
| function showChart(_chart) { | |
| d3.select("body") | |
| .append("div") | |
| .attr("class", "chart") | |
| .call(_chart); | |
| } | |
| </script> | |
| </body> | |
| </html> |
