EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    API examples for d3-indented-tree


myChart.linkLabel() - 5

This example shows how to

set the link label based on the numeric column size
set the color of the link label based on the value of the column size
propagate the value of data column size from the leaves all the way to the root by summing up the value directly descandants.


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>
    <!-- paste data in aside tag -->
    <aside id="data">
    </aside>

    <script>
      const dataSpec = {
        source: "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/flare.json",
        key: "name",
      };
      const llc = value => value > 6000 ? "green" : "red";
      const myChart = d3.indentedTree(dataSpec)
        .propagateValue("size")
        .linkLabel("size", {color: llc})
      ;

      showChart(myChart);

      window.setTimeout(function() {
        myChart.linkWidth(100);
      }, 2000);

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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">
	</aside>

	<script>
	const dataSpec = {
	source: "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/data/flare.json",
	key: "name",
	};
	const llc = value => value > 6000 ? "green" : "red";
	const myChart = d3.indentedTree(dataSpec)
	.propagateValue("size")
	.linkLabel("size", {color: llc})
	;

	showChart(myChart);

	window.setTimeout(function() {
	myChart.linkWidth(100);
	}, 2000);

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