D3 Examples - d3v4modules

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .node circle {
      fill: #999;
    }
​
    .node text {
      font: 10px sans-serif;
    }
​
    .node--internal circle {
      fill: #555;
    }
​
    .node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }
​
    .link {
      fill: none;
      stroke: #555;
      stroke-opacity: 0.4;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  
  <svg width="900" height="8000"></svg>
​
  <script>
​
        var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(40,0)");
    
    var tree = d3.tree()
    .size([height, width - 160]);
    
    var d3_modules = {
      name: "d3",
      children: []
    }
        
    d3.json("d3-dependencies.json",function(error,data){
      var modulesKeys = d3.keys(data);
      modulesKeys.forEach(function(key){
        var children = data[key].exported.map(function(d){
                    return {name: d};
        });
        if (key!=="d3") {
          d3_modules.children.push({
            name: key,
            children: children
            });
        } 
      });
      var root = d3.hierarchy(d3_modules);
      
      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")
          .attr("dy", 3)
          .attr("x", function(d) { return d.children ? -8 : 8; })
          .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
          .text(function(d) { return d.data.name });
​
});
  </script>
</body>
​
    