EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    API examples for d3-indented-tree


myChart.linkLabel() - 4

This example shows how to

set the link label based on the column color of type string
display the label above the link
place the link labels in the center of the link (align: "middle")
set the margins
use a file as the node image
set the width and height of the node image
draw an empty rectangle before drawing the image (setBackground: true) (to account for transparency of the image which would show otherwise the continuation of the link in the background)
determine the link width based on the column weight and mapping the width based the weight values onto the intervall [150, 300]
changing the link height to 50 pixels
setting the padding of the node label to 20 pixels such that the label is not overlapping the node image


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">
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 myChart = d3.indentedTree(dataSpec)
        .margin({top: 50, right: 10, bottom: 20, left: 50})
        .nodeImageFile("https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/images/jcartier-box.png", {
          width: 20, height: 20, setBackground: true})
        .linkLabel("color", {onTop: false, align: "middle"})
        .linkWidth("weight",{range: [150, 300]})
        .linkHeight(50)
        .nodeLabelPadding(20)
      ;

      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">
	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 myChart = d3.indentedTree(dataSpec)
	.margin({top: 50, right: 10, bottom: 20, left: 50})
	.nodeImageFile("https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/images/jcartier-box.png", {
	width: 20, height: 20, setBackground: true})
	.linkLabel("color", {onTop: false, align: "middle"})
	.linkWidth("weight",{range: [150, 300]})
	.linkHeight(50)
	.nodeLabelPadding(20)
	;

	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>