0

I am building this force layout in D3 Observable. Already looked at this answer.

I want the link length to be commensurate with the value passed from the data. So if these are my values: 

[1, 0.92, 0.89, 0.84, 0.83, 0.82, 0.76, 0.75, 0.74, 0.71, 0.69, 0.66, 0.65, 0.6, 0.58, 0.57, 0.54, 0.53, 0.47, 0.37, 0.35, 0.26, 0.14, 0.05, 0]

Then these nodes would be farther and farther away from the root (or closer and closer, doesn't matter, just needs to be consistent). Instead, this is what I get:

enter image description here

As you can see these are randomly placed from the root. Here is the relevant link code: 

const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id))
      .force("link", d3.forceLink().distance(function(d) {return d.value;}).strength(1))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

I am parsing the value from the data. The values are the ones above in the array. How can I get my D3 code to draw the link distance based on the magnitude of the value passed?

Cybernetic
  • 12,628
  • 16
  • 93
  • 132
  • Do you want the nodes to be at the right distance prior to initializing the force simulation (or on initialization of the force simulation) - or do you want them to end up at the right distance later, during the simulation (as [here](https://stackoverflow.com/q/38253560/7106086)) – Andrew Reid Jul 24 '19 at 15:40
  • Hmm interesting. I would take either approach as long as the correct distances are established within a few seconds of rendering the visual, and showing good separation between nodes. – Cybernetic Jul 24 '19 at 16:56

0 Answers0