Accepted answer

Let's take your last fiddle with the d3v4 implementation. 2 changes and it will work.

1) the ticked function to move the elements. Since nodes are svg groups now, you can't use cx and cy attributes (good for circles). You need to use transform translate like this:

  .attr("transform", function(d) { 
    return "translate(" + d.x + ", " + d.y + ")"; 

2) The node variable there contains only the update selection, since you called the enter selection nodeEnter. And since all elements are in the enter selection (just created), you don't move anything. So you just need to merge the two selections like this:

  .attr("r", function(d) { return d.value*10 })
node = nodeEnter.merge(node);

You can read more details in Mike Bostock documentation about this. Check also this and other similar bl.ocks.

To correctly target the links in ticked you should also merge enter and update link selections in the same way.

As a side note, you don't need to link source and target objects in the links as you do in getGraph function, since this is done by d3 simulation already. So you could just use your json object as data.

Here is a working fiddle. Hope it is clearer how to upgrade d3 v3 force directed layout to d3 v4 force simulation :D

Related Query

More Query from same tag