Solving the x, y is NaN error in twin d3v7 force graphs

Help
#1

Hi @curran I have a twin-svg panels viz, with twin force graphs that is failing on x, y NaN errors.
Temp 2 Level (vizhub.com)

The index.js file opens the initial data file and then passes data back and forth between the four functions in the working.js file that drive the data splitting and visualisations:. We had to chop things up to force the promises to resolve.

  1. Initialise SVG: Sets up the SVG’s, borders, and labels
  2. Split the data into Two Separate Nodes and Edges Graphs, “Promo” and “Scratch”
  3. Add all of the nodes, edges and labels to the Graphs
  4. Setup and turn on the simulation

So data/scratch.json contains the initial graph of nodes and edges data before it is split… The adjacency List is used to split the graph according to a condition, into two sub-graphs promo and scratch. This works fine as can be seen in the console. I’ve spent a lof time trying alternatives but have not been able to fix this.

I must be doing something stupid, but non-obvious. Can you help please? Why wont this visualisation work? What am I missing here? Please help

#2

Well, the issue is definitely related to having NaN as the x and y values on your nodes.

image
image958×510 55.8 KB

After some debugging, it appears that the linkStrength: 200 configuration may be the cause of the issue. Try smaller values like linkStrength: 2.

It’s a lot of code to be working with at once. It may be helpful to start something smaller, to isolate just the force layout. Good luck!