EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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:

d3.js
blockbuilder.org


## 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>
	<!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>