centering not happening when using .map to create multiple nodes and links
etwerk opened this issue · 9 comments
When using .map to create a list of and from data, the nodes are all being created and rendered into the upper left corner of the svg.
It looks like the centering logic and is not being calculated correctly when the .map creates an array of objects for each element, so while the elements are being created, the objects aren't being centered. Has anyone been able to use state data to .map through and create multiple within a and still center the graphic within the svg?
It seems to work when each element is hard coded, the issue is in mapping that data to create elements
Update to this issue: it seems to be similar to previous issues since the problem comes from using data from state. the initial graph rendered is (likely) centered, but empty, and as the state data is changed and updated, it is then moved left. It seems to be an issue with re-rendering the simulation.
I'm experiencing the same issue here. I agree it must be something with re-rendering because it is fine on this first render.
Yes, this is happening to me too. I use .map to display a new graph every time the user clicks on another interface element and the graph just gets collapsed into the upper left corner of the svg. Definitely it is something related to restart the simulation. In d3 that's how you do it when you update data for the graph. Any updates on this issue?
I was reading other related issues because it seems we are not the first ones dealing with this. I found a decent solution for this by now. It was mentioned in #46 and it finally works for me! It seems you should set manually the alpha option within simulationOptions to restart the simulation. Below you can find the code that works for me:
<InteractiveForceGraph
simulationOptions={{ height: this.props.height, width: this.props.width, alpha: 1 }}
labelAttr="id"
highlightDependencies
>
Hi Rosa, the code you posted does not render on GitHub since you are using JSX tags that are not in a code section. Please try again. I see now what you mentioned in the other issue...
@kristianmandrup Sorry, I don't follow what you mean by the code I posted does not render on Github. I can visualize it as a code section. Do you want me to provide a solution that does not involve the JSX tags?
@RosaRomeroGomez it seems you are correct. When alpha is set in simulationOptions, additional re-renders will center the graph. When it's not set, the graph moves off the canvas in the upper-left. 🎉 for figuring this out! I'm not sure what the issue stems from
Rosa, could you please add the fix in the code or as an option or add a note in the Readme. Thanks. Also if you would, please send me code sample fix to kmandrup at Gmail com.
Sure @kristianmandrup. I think I'll just add a note by now in the Readme and then, I'll see how to add it to the code. I'll send you that email as well.