dash14 / v-network-graph

An interactive network graph visualization component for Vue 3

Home Page:https://dash14.github.io/v-network-graph/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Grid view bugs when force layout is on

dariomesic opened this issue · comments

Hey @dash14,

I really like what you have done with this component and I would like to use it in my project.
Recently I encountered a small issue that I would like to know what I could do to fix it.
When using force layout with grid background, page with grid bugs and shrinks on the bottom right until I zoom in/out or click on the grid.
You can see the issue in image. Is this intentionall because grid can't be used normally with d3 or what seems to be a problem.
Thank you in advance and kind regards.

slika

I managed to find what was the cause of this issue. Issue is quite odd and I'm still not sure if this is intended or not but when I was using node names with simple alphabetical names grid would bug, but when I changed it to "node1", "node2" it worked.
First image worked and second one didn't.

slika

slika

Hi @dariomesic,
Thank you for reporting the issue!

I was able to reproduce the issue here as well, so I investigated and found it to be a bug.

When displaying a network graph, there was a problem with the view:pan event not informing the initial position of the pan if the pan was not moved at all as a result of the automatic pan adjustment. This caused rendering problems in the initial display, which in turn affected the grid display that was internally dependent on this view:pan event.

The initial state of the internal coordinates is that the center of the display area is (0,0). The force-layout is prone to this.
The reason the symptoms no longer occur when the label text is long is because the shape size has changed, and the automatic pan adjustment happens to work correctly in that case.

I have released v0.8.2 which fixes this issue, so please give it a try!

@dash14 Works amazing now, thank you so much!
I'm grateful I could help :)