d3-indented-tree API example #39 by EE2dev

API examples for d3-indented-tree

myChart.nodeImageFile() - 3

This example shows how to set the the node image file based on the data. There are two folder icons, one for folders with expanded children and one for folders with no (expanded) children.

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:

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 -->
    <!-- folder icons from https://github.com/KDE/oxygen-icons?tab=readme-ov-file -->
    <aside id="data"> 
key,parent,image1,image2
webapps,,"../images/folder.png","../images/folder_open.png"
docs,webapps,"../images/folder.png","../images/folder_open.png"
examples,webapps,"../images/folder.png","../images/folder_open.png"
HelloWeb,webapps,"../images/folder.png","../images/folder_open.png"
META-INF,HelloWeb,"../images/folder.png","../images/folder_open.png"
context.xml,META-INF,"../images/ie9.svg","../images/ie9.svg"
      </aside>
  
    <script>
      const url = "https://cdn.jsdelivr.net/gh/EE2dev/d3-indented-tree/test/blocks/";
      const dataSpec = {
        source: "aside#data",  
      };
      const myChart = d3.indentedTree(dataSpec)
       .nodeImageFile(d => d._children ? url + d.data.image1 : url + d.data.image2 , { width: 20, height: 20}) 
       .nodeLabelPadding(20)
      ;

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