d3-indented-tree API example #19 by EE2dev

API examples for d3-indented-tree

myChart.linkLabel() - 5

This example shows how to

set the link label based on the numeric column size
set the color of the link label based on the value of the column size
propagate the value of data column size from the leaves all the way to the root by summing up the value directly descandants.

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:

index.html

<!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 llc = value => value > 6000 ? "green" : "red";
      const myChart = d3.indentedTree(dataSpec)
        .propagateValue("size")
        .linkLabel("size", {color: llc})
      ;

      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>