search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
485 stars 44 forks source link

Grid view bugs when force layout is on #102

Closed dariomesic closed 1 year ago

dariomesic commented 1 year ago

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

dariomesic commented 1 year ago

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

dash14 commented 1 year ago

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!

dariomesic commented 1 year ago

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