You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
How can I smartly layout my nodes such that there are no overlapping edge labels?
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:
Positive users in first row
Negative users in second row
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:
constnodeCoordinates: Record<string,{x: number;y: number}>={};constpartitionedNodes=partition(Object.entries(nodes.value),([nodeId,node])=>{returnnode.net_balance>0;});constpositiveNodes=partitionedNodes[0];constnegativeNodes=partitionedNodes[1];// Sort the positive and negative nodes by net balancepositiveNodes.sort((a,b)=>{returnb[1].net_balance-a[1].net_balance;});negativeNodes.sort((a,b)=>{returna[1].net_balance-b[1].net_balance;});// Calculate the number of rows and columns we needconstpositiveRows=1;constnegativeRows=1;constpositiveColumns=Math.ceil(positiveNodes.length/positiveRows);constnegativeColumns=Math.ceil(negativeNodes.length/negativeRows);// Calculate the X and Y coordinates of each nodepositiveNodes.forEach(([nodeId,node],index)=>{constrow=Math.floor(index/positiveColumns);constcolumn=index%positiveColumns;constx=column*nodeSize*2+index*nodeSize;consty=row*nodeSize*2;nodeCoordinates[nodeId]={ x, y };});negativeNodes.forEach(([nodeId,node],index)=>{constrow=Math.floor(index/negativeColumns);constcolumn=index%negativeColumns;constx=column*nodeSize*2+index*nodeSize;consty=(row+positiveRows)*nodeSize*2;nodeCoordinates[nodeId]={ x, y };});// layouts.nodes[nodeId] = { x, y };Object.entries(nodeCoordinates).forEach(([nodeId,coordinates])=>{layouts.nodes[nodeId]=coordinates;});
The text was updated successfully, but these errors were encountered:
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!
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....
Use force layout or circle layout (coordinates are calculated so that nodes are placed in a circle) because simple rectangular layout increases the possibility of overlapping edges.
Display edge labels on the source side of the edge instead of in the center of the edge.
Sorry I don't know about helpful libraries.
I apologize for not being able to help you.
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:
![CleanShot 2023-12-12 at 14 41 03](https://private-user-images.githubusercontent.com/1431995/290022590-0b9b7290-8a80-40ac-b990-0259832e7028.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTgwMTMsIm5iZiI6MTcyMTM5NzcxMywicGF0aCI6Ii8xNDMxOTk1LzI5MDAyMjU5MC0wYjliNzI5MC04YTgwLTQwYWMtYjk5MC0wMjU5ODMyZTcwMjgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTQwMTUzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWZhZjkyYjJiMzY1NDc1NTRlY2Q1NzkwZjkwYWY5NjIxZTgzNDQ3NDg1NGVhY2Y4NmExZjQyZmJlNTdjMGU1MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.0M1dF8SLfXyJC2bVxsYQuXhmXt_lWvRvVEfEHAO3MmE)
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:
![CleanShot 2023-12-12 at 14 41 55](https://private-user-images.githubusercontent.com/1431995/290022812-e7eb8503-bf70-42dd-b508-28c30c6ab4e1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzOTgwMTMsIm5iZiI6MTcyMTM5NzcxMywicGF0aCI6Ii8xNDMxOTk1LzI5MDAyMjgxMi1lN2ViODUwMy1iZjcwLTQyZGQtYjUwOC0yOGMzMGM2YWI0ZTEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTlUMTQwMTUzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2I5NTNiZThlZDU0ZjY0MGMyNDgzODRjNGZjMzUyYmNjYmNjOGRiNmVlODE1NDkwMWM5MWVhY2JiNzJhNDZkOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.U3-93HugJPkKFZ7u1BiIXNBFnZkiRVrSF3TiYC0fPj4)
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: