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
xxxxxxxxxx
<style>
.animate {
animation: ani 1.5s linear 0s infinite alternate;
}
@keyframes ani {
from {
transform: scale(1)
}
to {
transform: scale(2)
}
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
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