d3-indented-tree API example #32

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

ascending: true (default is false)
sortByHeight: true (default is false). Now the sorting is done for each group based on the height of the node.

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

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">
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>

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