block by EE2dev 7d866c0fd487fd42402832f9c8d3c6c3

d3-indented-tree API example #32

Full Screen

API examples for d3-indented-tree

myChart.nodeSort() - 2

This example shows how to resort the nodes of the tree. When disabling convertTypes, the columns become strings and thus affecting the sorting order. The sorting order can be also parametrized by

The height of a node is the greatest distance from any descendant leaf.

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>
    <!-- for local processing without web server, paste data inside the aside tag -->
    <aside id="data">
name,parent,num,tex
Eve,,2,a
Cain,Eve,33,b
Seth,Eve,3,c
Enos,Seth,4,d
Noam,Seth,5,e
Peter,Seth,9,j
Georg,Seth,1,k
Abel,Eve,4,f 
Awan,Eve,3,g
Enoch,Awan,7,h
Azura,Eve,2,i
  	</aside>
    
    <script>
      const dataSpec = {
        source: "aside#data",
        key: "name",
        convertTypes: "none",
      };
      const myChart = d3.indentedTree(dataSpec)
        .linkLabel("num")
        ;
      
      showChart(myChart);
      
      window.setTimeout(function() {
        myChart.linkWidth(100).nodeSort("num", { "ascending": true, "sortByHeight": true});
      }, 2000);

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