Modifying a Force Layout

This example demonstrates how to add and remove nodes and links from a force layout. The graph initially appears with three nodes A, B and C connected in a loop. Three seconds later, node B is removed, along with the links B-A and B-C. At six seconds, node B is reintroduced, restoring the original links B-A and B-C. This example uses the general update pattern for data joins.

forked from mbostock's block: Modifying a Force Layout

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  stroke: #000;
  stroke-width: 1.5px;
}

.node {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

.node.a { fill: #1f77b4; }
.node.b { fill: #ff7f0e; }
.node.c { fill: #2ca02c; }

</style>
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script>

var width = 960,
    height = 500;

var color = (i) => d3.schemeCategory10[i];

var nodes = [],
    links = [];

var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
nodes.push(a, b, c);
  
simulation.nodes(nodes);
  
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link");
  
start()

// 1. Add three nodes and three links.
setTimeout(function() {
  var a = {id: "a" + Math.random() * 10}, b = {id: "b" + Math.random() * 10}, c = {id: "c" + Math.random() * 10};
  nodes.push(a, b, c);
  //links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
  console.log("Nodes", nodes);
  start();
}, 2000);

</script>

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