d3 v4 forces acting on dynamically added nodes - d3.js

Question

I'm trying to add nodes one by one to a d3 force simulation (in version 4!) but some do not seem to be being evolved by the simulation after they've been created.
Currently the simulation assigns one node, then a function, addNode is called twice adding two more nodes. Each is added to the simulation, has a circle and a line rendered and has a cursor event added, one by one.
(Technically the first and second node are done at the same time, as the first is only set up when addNode is called on the second)
Then, when a node is clicked, a new node, connected to the one under the cursor, should be created. This node should then evolve under the forces of the simulation like any other.
However, whilst one or two nodes seem to be created fine, later nodes don't seem to be evolving under the simulation. Specifically the many-body force, which should be keeping some space between nodes, doesn't seem to function.
My intuition is that the nodes are being added at an inopportune time for the simulation's ticked function (earlier problems were solved by adding some simulation.stop and simulation.restart commands any time new nodes were being added) but in theory the simulation should be paused whenever new bodies are being added.
Is this a correct implementation of dynamically adding nodes in d3 v4, or are the issues with forces just highlighting a mangled method? This previous answer helped me to realize that I needed to merge new entries, but forces seem to be working fine there.
var w = 250;
var h = 250;
var svg = d3.select("body").append("svg");
svg.attr('width', w)
.attr('height', h);
// ensures links sit beneath nodes
svg.append("g").attr("id", "lnks")
svg.append("g").attr("id", "nds")
function new_node(id) {
this.id = id;
this.x = w / 2;
this.y = h / 2;
}
function new_link(source, target) {
this.source = source;
this.target = target;
}
var nodes = [];
var links = [];
var node;
var circles;
var link;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().distance(80).id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody().strength(-1000))
.force("xPos", d3.forceX(w / 2))
.force("yPos", d3.forceY(h / 2))
.on('tick', ticked);
simulation.stop();
var newNode = new new_node(0);
nodes.push(newNode);
for (var i = 1; i < 3; i++) {
if (i == 3) continue;
addNode(0, i)
}
function addNode(rootId, newId) {
var newNode = new new_node(newId);
nodes.push(newNode);
var newLink = new new_link(rootId, newId);
links.push(newLink);
//adds newest link and draws it
link = svg.select("#lnks").selectAll(".link")
.data(links)
var linkEnter = link
.enter().append("line")
.attr("class", "link");
link = linkEnter.merge(link);
//adds newest node
node = svg.select("#nds").selectAll(".node")
.data(nodes)
var nodeEnter = node
.enter().append("g")
.attr("class", "node");
//draws circle on newest node
var circlesEnter = nodeEnter.append('circle')
node = nodeEnter.merge(node);
circles = d3.selectAll('circle');
simulation.stop();
simulation.nodes(nodes);
simulation.force("link")
.links(links);
restartSim();
}
//starts up the simulation and sets up the way the leaves react to interaction
function restartSim() {
simulation.restart();
circles.on('click', function(d, i) {
addNode(i, nodes.length)
})
}
function ticked() {
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;
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
.link {
stroke: #bbb;
}
.node circle {
pointer-events: all;
fill: black;
stroke-width: 0px;
r: 20px
}
h1 {
color: white;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
Code also on codepen here:
http://codepen.io/zpenoyre/pen/kkxBRW?editors=0010

Answer 1

The force simulations as the name implies is a simulation on particles interacting with each other. Alpha is used to help converge the system by decaying at each iteration. The forces are multiplied by alpha, so at each iteration the forces become weaker until alpha reaches a very low value when the simulation stops. From d3 documentation:
simulation.restart() <>
Restarts the simulation’s internal timer and returns the simulation.
In conjunction with simulation.alphaTarget or simulation.alpha, this
method can be used to “reheat” the simulation during interaction, such
as when dragging a node, or to resume the simulation after temporarily
pausing it with simulation.stop.
When you add a node, the simulation already stopped, so, you need to "reheat" the simulation with alpha 1.
simulation.force("link")
.links(links);
simulation.alpha(1); // <---- reheat;
restartSim();
Here is the updated code pen:
http://codepen.io/anon/pen/amqrWq?editors=0010