blog-d3-graph-all

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>

CSS

line {
  stroke: #666;
}

.node {
  pointer-events: all;
}

circle {
  stroke: none;
  stroke-width: 40px;
}

.node text {
  font: 8px sans-serif;
}

JavaScript

var data = {
  "name": "Root",
  "children": [{
    "name": "Branch 1"
  }, {
    "name": "Branch 2",
    "children": [{
      "name": "Branch 2.1"
    }, {
      "name": "Branch 2.2",
      "children": [{
        "name": "Branch 2.2.1"
      }, {
        "name": "Branch 2.2.2"
      }]
    }]
  }, {
    "name": "Branch 3"
  }, {
    "name": "Branch 4",
    "children": [{
      "name": "Branch 4.1"
    }, {
      "name": "Branch 4.2"
    }]
  }, {
    "name": "Branch 5"
  }]
};

var link, node;

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height"),
  g = svg.append("g");


// Setting up the simulation
var simulation = d3.forceSimulation()
  // add linking force (empty for now)
  .force("link", d3.forceLink())
  // add repelling charge, defaults to -30
  .force("charge", d3.forceManyBody())
  // add force towards center
  .force("center", d3.forceCenter(width / 2, height / 2))
  // call ticked for every simulation tick
  .on("tick", ticked);

root = d3.hierarchy(data);

run()

function run() {
  // Add nodes to the simulation
  simulation
    .nodes(root.descendants())

  // Add link constraints to the simulation
  simulation.force("link")
    .links(root.links())
    .distance(40)
    .strength(0.2);

  simulation.force("charge")
    .strength(-100);

  // Select nodes
  node = g.selectAll(".node")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("class", "node")

  // Add node SVG circle
  node.append("circle")
    .attr("r", 10)

  // Add node SVG text
  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;
    });

  // Create SVG links
  link = g.selectAll(".link")
    .data(root.links())
    .enter()
    .append("line")
    .attr("class", "link")
    .attr("stroke-width", "2px")
    .attr("stroke", "#ddd")
   ...