DAG-Style force-graph: Add (Y-Axis) Space Between Children Of Same Level

[manunamz]

Is your feature request related to a problem? Please describe. If there are text labels they are difficult to read when using dag-style force-graphs.

Describe the solution you'd like I'm not entirely sure what the best way to accomplish this is, but allowing for some method of incremental or pseudo-random length changes per level would go a long way for readability (similar to d3's built-in hierarchy graph-type):

With the DAG-style force-graph:

With d3's built-in hierarchy graph:

One way to implement this would be to have dagLevelDistance (or a new attr) accept a function rather than a number as input, so as to compute desired level lengths.

Describe alternatives you've considered It might be possible to achieve this by altering the y value of nodes in nodeCanvasObject...But that has not worked well for me (nodes oscillated for a long time before settling).

Another possibility is to use linkCurvature to add space between nodes. But I have not tried this myself: I want to keep my lines straight for artistic reasons.

Besides, with dagLevelDistance already there, it would be nice to handle that logic with that attribute.

PS Thanks for flattening the input data arrays. :D

[jrmartin]

Hi @manunamz , did you have good luck fixing this? I'm facing a similar issue but haven't gotten the forces quite right yet.

[manunamz]

Hi @jrmartin, I have not, but I am planning on revisiting this at some point.

[jrmartin]

Thanks for replying @manunamz :) I gave up playing with the library forces, and started calculating the x and y position of each node instead. It's the only way I got it to work.

[manunamz]

A month later... 😂 (I will get my notifications straight someday)

Is that to say you're fiddling with d3 directly now? Or are you setting the x/y with force-graph?

[jrmartin]

I'm setting the x/y positions directly with force-graph.

Before passing the nodes to the force-graph, I calculate the x and y position for each node and store them inside the node under custom properties. E.G.

node.xPos = 100;
node.yPos = 100;

I then use the force-graph 'nodeVal' method to assign the node's x and y position.

This is how I assigned them the node x and y positions: nodeVal = { node => { node.fx = node.xPos; node.fy = node.yPos; }}