d3-indented-tree API example #17

API examples for d3-indented-tree

myChart.linkLabel() - 2

This example shows how to set the link label based on the column weight, displaying its values with the string "Euro", format the values with 2 decimals and setting the locale property to "DE".

In addition, it shows the transition of the link labels when it is changed from the values of the column weight to the column size.

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:

<!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>
    
    <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>
      const dataSpec = {
        source: "aside#data",
      };
      const myChart = d3.indentedTree(dataSpec)
        .linkLabel("weight", {unit: " Euro", format: ",.2f", locale: "DE"})
        .linkWidth("weight",{range: [100, 200]})
      ;

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>

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