-
-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to avoid edge labels overlapping/obstructed by other nodes/edges? #139
Comments
Hi @bradleybernard,
Yes, this library is not focused on layout functionality, so it seems difficult to solve this problem using only v-network-graph. To address this, I came up with the following, which probably does not fit your application requirements....
Sorry I don't know about helpful libraries. |
Hey there,
First off I just wanted to say: this library is amazing!! The docs are incredible, the real time reactive demos make life so much easier, thank you for making it a high quality library with extremely detailed docs!
I know this library does not focus on the layout piece, but I'm curious if you have any suggestions or other good libs to recommend to achieve such an effect!
My use case is:
I have a graph where nodes = users and edges = payments. Each edge is labeled with the $$ amount in the center type. I layout my graph with positive balances on top, and negative balances on bottom, meaning all arrows point from bottom to top!
The lib works wonderfully for a simple graph, but when I have 8 edges and I lay them out like so:
This is what it looks like with no edges obstructed:
Due to my own layout code, the bottom middle node sits right on top of an edge between the bottom left and bottom right node, since the edge label is placed in the center, so you can't see it and you don't even know it's there until you drag around the nodes to reveal it.
This is what it looks like when the bottom edge is obstructed between the bottom left and bottom right node:
I could alternate the Y axis for each column in a row, but it wouldn't solve it all, if two of the nodes are connected and both are upper or lower, if that makes sense. Any good ideas here? Any help would be greatly appreciated!
My layout code:
The text was updated successfully, but these errors were encountered: