D3 Examples - basic tree structure graph

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .link{
      stroke: green;
    }
    .circleNode{
      fill: green;
    }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const width = 960;
    const height = 500;
    const margin = {top: 20, right: 20, bottom: 20, left: 20};
    
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    const tree = d3.tree().size([width - margin.left - margin.right, height - margin.top - margin.bottom]);
    
    const chartGroup = svg.append('g')
        .attr('transform', `translate(${margin.top},${margin.left})`);
​
    d3.json('treeData.json').get((err, data) => {
      console.log(data);
      const root = d3.hierarchy(data[0]);
      console.log('root', root);
      console.log('root descendants', root.descendants())
      tree(root);
      chartGroup.selectAll('circle')
        .data(root.descendants())
        .enter()
        .append('circle')
        .attr('class', 'circleNode')
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .attr('r', 15);
      
       chartGroup.selectAll('path')
        .data(root.descendants().slice(1))
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr('d', d => `M${d.x},${d.y}L${d.parent.x},${d.parent.y}`)
    })
​
  </script>
</body>
​
    