Modifying a Force Layout

This example demonstrates how to add and remove nodes and links from a force-directed layout. The graph initially appears with three disconnected nodes A, B and C. After one second, the three are connected in a loop. At two seconds, node C is removed, along with the links A-C and B-C. At three seconds, node C is reintroduced, restoring the original links A-C and B-C. Every subsequent second alternates between these two steps.

This example uses the general update pattern for data joins. See also modifying a force layout with transitions.

forked from mbostock's block: Modifying a Force Layout

<!DOCTYPE html>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    color = d3.scaleOrdinal(d3.schemeCategory10);

var a = {id: "a",fid:0, fx: 0, fy:0, s: null},
    b = {id: "b", fid: 'a', s: 4000},
    c = {id: "c", fid: 'b', s: 2000},
    d = {id: "d", x: -50, y: -50, s: 1000},
    e = {id: "e", x: -100, y: -80, s: 3000},
    nodes = [a],
    links = [];

var simulation = d3.forceSimulation(nodes)
    .force("charge", d3.forceManyBody().strength(-100))
    .force("link", d3.forceLink(links).distance(40))
    .force("x", d3.forceX())
    .force("y", d3.forceY())
    .alphaTarget(1)
    .on("tick", ticked);

var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
    link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
    node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

restart();

d3.timeout(function() {
  nodes.push(b);
  links.push({source: a, target: b}); // Add a-b.
//   links.push({source: b, target: c}); // Add b-c.
//   links.push({source: c, target: a}); // Add c-a.
  restart();
}, 1000);
  
d3.timeout(function(){
  nodes.push(c);
 
  links.push({source: b, target: c});
  restart()
  
}, 2000)

// d3.timeout(function(){
//   nodes.push(d);
//   links.push({source: a, target: d});
//   restart()
// }, 3000)

// d3.interval(function() {
//   nodes.pop(); // Remove c.
//   links.pop(); // Remove c-a.
//   links.pop(); // Remove b-c.
//   restart();
// }, 2000, d3.now());

// d3.interval(function() {
//   nodes.push(c); // Re-add c.
//   links.push({source: b, target: c}); // Re-add b-c.
//   links.push({source: c, target: a}); // Re-add c-a.
//   restart();
// }, 2000, d3.now() + 1000);

function restart() {

// Apply the general update pattern to the nodes.
  node = node.data(nodes, function(d) { return d.id;});
  node = node.enter().append("circle").attr("fill", function(d) { return color(d.id); }).attr("r", 8).merge(node);

// Apply the general update pattern to the links.
  link = link.data(links, function(d) { return d.source.id + "-" + d.target.id; });
  link.exit().remove();
  link = link.enter().append("line").merge(link);

// Update and restart the simulation.
  simulation.nodes(nodes);
  simulation.force("link").links(links);
  simulation.alpha(1).restart();
}

function ticked() {
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })

link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}

</script>

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