Giters

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

[feature request] Replace standard graph layout algorithm to something more correct.

Claus1 opened this issue · comments

commented

For me standard graph layout algorithm is the weakest place in the library. Almost useless for drawing for my cases
image

At least it has to be
image

commented

Hi @Claus1,

Thank you for your feedback! As you pointed out, v-network-graph does not have a feature for layouts that take into account the connection relationships of the graph.

The appropriate layout will vary depending on the application being developed. With v-network-graph, it is possible to specify the display position of each node individually. Therefore, for now, I would appreciate it if developers could implement the desired layout by specifying it in the layouts prop.

Something similar to the layout you have shown may be achieved by using dagre. You may have already seen it, but here is a link to an example I created earlier.
https://dash14.github.io/v-network-graph/examples/layout.html#automatic-layout

However, I do think that it would be useful to have several typical layouts available. Therefore, there is a possibility that I will incorporate some layouts in the future.

Best Regards

commented

Hi dash14! I integrated dagre but anyway it doesn't suit for me because big graphs looks not good (edges has to be curved and not crossed for that when possible) and the drawing is too slow, comparing with cytoscape or sigmajs. Better to point somewhere in docs that.

commented

@Claus1
Thank you for your reply!
Sorry to hear that you have already tried dagre.

Note that regarding the performance of drawing large graphs, since cytoscape and sigmajs are WebGL-based, it is difficult for v-network-graph, which is SVG-based, to achieve the same level of performance in the first place.

Currently, layout algorithms are outside the scope of v-network-graph, but I would consider providing some algorithms in the future.
Thank you for your feedback!

commented

Hi @dash14

First I want to thank you for your amazing work on this library!!

Reading this issue I realize I'm not the only one having performance issues when working with large graphics. D3 uses SVG to create graphs, I have created some with hundreds of nodes and the performance was great. In the case of your library, are you sure the performance issue is related to SVG and not reactive data? I ran into a similar performance issue when working with a leaflet map passing reactive data to it. After removing the reactivity, the map worked without a problem. But I don't know if this is the case here.

Cheers!