basic tree structure graph

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

https://d3js.org/d3.v4.min.js