title: d3.js force graph : links spreading the graph too much
body: <p>I want to display a set of nodes in a force-directed graph.Those nodes have almost exclusively a parent-child relationship (almost a tree).There are a few nodes which have many children, and most others are leaves.
  This produces a structure of several interconnected node "islands".The problem is, those "islands" keep spreading apart, specially when nodes are dragged.</p>
  
  <p>Fiddle here: <a href="https://jsfiddle.net/50oz3xtr/" rel="nofollow noreferrer">https://jsfiddle.net/50oz3xtr/</a>
  I've been trying different settings in the following block:</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>But without luck (strength, distanceMin...)</p>
  
  <p>My questions are:
  - How can i set a "max length" on links, so the graph doesnt spread too much?
  - Is there a way to set a "fixed" length to links?</p>