how do you set a fixed link distance with d3 v4

Question

All the API examples seem to be for v3 still. I'm trying to understand how to create a force graph with links of a fixed distance, like: http://bl.ocks.org/d3noob/5141278

I looked at link_distance but not sure how to apply it: https://github.com/d3/d3-force/blob/master/README.md#link_distance

Creating a graph like this:

  let simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody().strength(-150))
      .force("center", d3.forceCenter(width / 2, height / 2));

I tried various combos like:

  // .force("link", d3.forceLink().distance(20).strength(1))
  // .force("linkDistance", 20)
  // .force("link", d3.forceLink().id(function(d) { return d.id; }))

but no luck!

So it seems link_distance can't be fixed? its a result of strength and (distance, whatever that is)

So how do I apply strength and distance to links in d3 v4 ? Is it applied to the simulation or something else?

Answer 1

You are closer to change the distance in v4! Check this change... it works for me:

    var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d, i) { return i; }).distance(100).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

The original code was almost correct. However, the i needs to be added to the function, and i also needs to be returned in order to change the link distance. I edited the original code to reflect this. Please see this link: Link to Free Code Camp