D3 Examples - Simple Tree Diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
       .node circle {
          fill: #fff;
          stroke: steelblue;
          stroke-width: 3px;
        }
​
        .link {
          fill: none;
          stroke: #ccc;
          stroke-width: 2px;
        }
    </style>
</head>
<body>
​
        <script type="text/javascript">
​
var data = { "name": "Parent", "children": [ 
    { "name": "Child A", "children": [ { "name": "Grandchild" } ] }, 
    { "name": "Child B", } 
    ] };
​
var width = 960;
var height = 500;
​
margin = {left: 100, top: 100, right: 50, bottom: 50}
​
var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
      
var g = svg.append("g").attr('transform','translate('+ margin.left +','+ margin.right +')');
​
var root = d3.hierarchy(data);
      
var tree = d3.tree()
    .size([height-margin.top-margin.bottom,width-margin.left-margin.right]);
​
 var link = g.selectAll(".link")
    .data(tree(root).links())
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.linkHorizontal()
          .x(function(d) { return d.y; })
          .y(function(d) { return d.x; }));
​
  var node = g.selectAll(".node")
    .data(root.descendants())
    .enter().append("g")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
​
  node.append("circle")
      .attr("r", 2.5);
      
  node.append("text")
     .text(function(d) { return d.data.name; })
     .attr('y',-10)
     .attr('x',-10)
     .attr('text-anchor','middle');
</script>
​
​
    