D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    html, body {
      margin: 0px;
      background: #32333b;
      height: 100%;
      font-family: sans-serif;
      font-size: 0.9rem;
    }
​
    .container {
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      padding: 40px;
    }
    .wrapper:hover .caption {
      visibility: visible;
      opacity: 1;
    }
​
    .caption {
      color: #f2f2f2;
      display: flex;
      align-items:center;
      justify-content:center;
      visibility: hidden;
      opacity: 0;
      height: 50px;
      transition : all 0.4s ease-out;
    }
​
    .label {
      text-anchor: middle;
      pointer-events : none;
    }
​
    .node {
      cursor : pointer;
    }
​
  </style>
</head>
​
<body>
  <div class="container">
​
    <div class="wrapper">
      <svg class="graph" id="tree" width="960" height="400">
        <g transorm="translate(40, 40)">
          <g class="links"></g>
          <g class="nodes"></g>
        </g>
      </svg>
      <div class="caption">tree layout</div>
    </div>
  </div>
  <script>
    d3.json('data.json', function (error, data) {
      var root = d3.hierarchy(data);  
​
      var treeLayout = d3.tree()
      treeLayout.size([760,300]);
      treeLayout(root);
​
      var tree = d3.select('#tree g.nodes')
​
      var treeNodes = tree.selectAll('g.node')
        .data(root.descendants())
        .enter()
        .append('g')
        .classed('node', true);
​
​
      treeNodes.append('circle')
        .classed('the-node solid', true)
        .attr('cx', d=> d.x)
        .attr('cy', d=> d.y + 30)
        .attr('r', d => 14)
        .style("fill", "#696969");
​
​
      treeNodes.append('text')
        .attr('class', 'label')
        .attr('dx', d => d.x)
        .attr('dy', d => d.y+4)
        .text(d => d.data.name);
​
      var treeLinks = d3.select('#tree g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter()
        .append('line')
        .classed('link', true)
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y + 30)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y + 30)
        .style("stroke", "#5f5f5f");
    });
  </script>
</body>
​
    