Alignment is screwed up when nodes are being added/deleted

[kirill-konshin]

Normal alignment:

Alignment after filtering out some nodes and links:

(e.g. all nodes are messed somewhere near left top corner of canvas).

Options:

{
  animate: false, // eats CPU like crazy
  height: 1000,
  width: 1200,
  strength: {
    collide: 5
  }
}

Live demo: https://web-stats.herokuapp.com click on checkboxes at right side to see the bug.

[kirill-konshin]

Bump!

[nikordaris]

I'm not sure why your graph is behaving like it is but in general I would use a negative charge strength to repel your nodes away from each other to present a cleaner looking graph. Also, collide strength is supposed to be a value between [0, 1]. d3-force#collide.strength

[kirill-konshin]

I have tried with strength = 1

Also I tried negative strength. Did not help, nodes are still crowded in a corner after any data update.

[jackmallers]

I am dealing with this issue as well. Anybody come up with a solution?

[gjuchault]

Note: this also impacts when you use someArray.map(item => ForceGraphNode) Something like :

<ForceGraph simulationOptions={forceGraphOptions}>
  {this.props.nodes.map((node, i) => (
    <ForceGraphNode node={node} fill="black" key={i} />
  ))}
  {this.props.links.map((link, i) => (
    <ForceGraphLink link={link} key={i} />
  ))}
</ForceGraph>

Edit: as data comes from some redux store, here is what I did to dirty fix:

  componentDidUpdate() {
    this.fg && this.fg.simulation.restart()
  }

With <ForceGraph simulationOptions={..} ref={(el) => this.fg = el}>

[jkolbe]

@gjuchault, I am getting Uncaught TypeError: Cannot read property 'restart' of undefined when trying out your recommendation. Thoughts?

[gjuchault]

Are you sure that you put ref={(el) => this.fg = el} on the ForceGraph node so that this.fg is defined ?

[aurbano]

@gjuchault so this works, but it doesn't seem to be using the same settings for strength as it did before - essentially the animation runs for a little while (slowly) and stops before reaching a state similar to the previous one

EDIT: Fixed by setting the alpha option on the simulationOptions, 0.1 in my case worked well.

[jkolbe]

@gjuchault , I don't see simulation prop

[gjuchault]

@jkolbe Are you using the ForceGraph element ? Maybe you should ask that somewhere else as this issue is not about my temporary fix :p

[kristianmandrup]

Anyone have any idea what could be the core issue and what needs to be done to fix it??