force-graph icon indicating copy to clipboard operation
force-graph copied to clipboard

Draw links between nodes

Open njifares opened this issue 4 years ago • 2 comments

Describe the solution you'd like I would like to draw links between nodes by dragging from one node to another but I have no idea where to start. I know how to do it via d3 but here d3 is only used for the physics and not the rendering. Could you point me in a direction on how to implement this myself?

Describe alternatives you've considered I've used d3 before but the graph we're rendering contains too many items and performance became an issue.

njifares avatar Nov 28 '20 10:11 njifares

You would have to use onNodeDragEnd and use the node's original coordinates plus the coordinate translation (included in the function) to see if you "dropped" it on top of another node, by checking that calculated coordinate to the coordinate of all the nodes. (May take some time depending on how many nodes you have)

Or you can implement a node selecting system, where you could left click to select the first node, and right click the second node to create a link or make a pop-up with options on what to do.

Here's an example of how my implementation works.

linksgif

Alexithemia avatar Nov 30 '20 16:11 Alexithemia

@Alexithemia how did you achieve adding a label bellow the node?

aoloo avatar Jan 18 '21 14:01 aoloo