Static force layout in D3 v4
<p>I am trying to reproduce <a href="http://bl.ocks.org/mbostock/1667139" rel="nofollow">this example ("Static Force Layout" by Mike Bostock)</a> in D3 v4.</p>

<p>I have combined Mike's code with what I learned while creating a dynamic force graph (which can be found <a href="http://bl.ocks.org/Federicopvs/8ce3840933bb44fbdeb1e95ae8d3f814" rel="nofollow">here</a>).</p>

<p>I (perhaps mistakenly) thought that making a static force graph would be easier, but I do not fully understand the logic of Mike's tutorial and I cannot "translate it to v4 language".</p>

<p><a href="http://bl.ocks.org/Federicopvs/7bbfc373d6f6ceb2f2524218f8a788e8" rel="nofollow">This is how far I got.</a></p>

<p>In Mike's example each time the page is refreshed the nodes take a different position. My understanding is that the each tick operation moves each node randomly. Hence the position is determined (randomly) by this part of the code:</p>

<pre><code>// Use a timeout to allow the rest of the page to load first.
setTimeout(function() {

// Run the layout a fixed number of times.
// The ideal number of times scales with graph complexity.
// Of course, don't run too long—you'll hang the page!
force.start();
for (var i = n * n; i &gt; 0; --i) force.tick();
force.stop();

svg.selectAll("line")
  .data(links)
  .enter().append("line")
  .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; });

svg.selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 4.5);

loading.remove();
}, 10);
</code></pre>

<p>Where n is set arbitrarily.</p>

<p>This is how I translated that part:</p>

<pre><code>setTimeout(function() {

var simulation = d3.forceSimulation()
        .force('link', d3.forceLink().id(function (d) { return d.ID; }))
        .force('charge', d3.forceManyBody())
        .force('center', d3.forceCenter(width / 2, height / 2));

var n = 1000;
//I thought that since I have many nodes and edges in my graph I should use a highgher n. However, wheter n=10 or 1000 nothing changes in the final result

for (var i = n * n; i &gt; 0; --i) simulation.tick();

simulation
  .nodes(data.nodes)
  .on('tick', ticked);

simulation.force('link')
  .links(data.edges)
  .distance(distance);

function ticked () {
    d3.selectAll('circle')
        .attr('cx', function(d) { return d.x = Math.max(radius,  Math.min(width - radius, d.x)); })
        .attr('cy', function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

    d3.selectAll('line')
        .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; });        
}   
//Strange fact: I need to have both this tick function and the position attributes for each node and edge for the visualization to show something.

simulation.stop();

var link = graph.append("g")
    .attr('class', 'links')
    .selectAll("line")
    .data(data.edges)
    .enter()
    .append("line")
    .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; });

var node = graph.append("g")
    .attr('class', 'nodes')
    .selectAll("circle")
    .data(data.nodes)
    .enter()
    .append("circle")
    .attr("r", radius)
    .attr('fill', 'red')
    .attr('cx', function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
    .attr('cy', function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

loading.remove();
}, 10);
</code></pre>

<p>Any idea what I am doing wrong?</p>