d3-indented-tree API example #18 by EE2dev

API examples for d3-indented-tree

myChart.linkLabel() - 3, myChart.formatDefaultLocale()

This example shows how to set the link label based on the column weight, displaying its values with the string “Euro”. The locale is set by myChart.formatDefaultLocale().

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">
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 localeGerman = {
        "decimal": ",",
        "thousands": ".",
        "grouping": [3],
        "currency": ["", " €"]   
      };
      const myChart = d3.indentedTree(dataSpec)
        .propagateValue("size")
        .formatDefaultLocale(localeGerman)
        .linkLabel("weight",{unit: " Euro", onTop: true, format: ",.2f"})
        .linkWidth(100)
      ;

      showChart(myChart); 
      
      function showChart(_chart) {
        d3.select("body")
          .append("div")
          .attr("class", "chart")
          .call(_chart);
      }         
    </script>
  </body>
</html>