search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.83k stars 836 forks source link

Controlling starting position of new nodes #117

Closed Public-Health-Bioinformatics closed 5 years ago

Public-Health-Bioinformatics commented 6 years ago

I'm using the capacity to generate new nodes and links to successively build a hierarchic 2d and 3d graphs based on a single tree (acyclic graph). However, if one gives 3d-force-graph all the nodes at once, overlaps occur, where one branch has children which get tangled with another branches space because of the initial randomized placement of graph nodes.

So perhaps you know of a solution where each branch gets its sector of the tree and no edges overlap, in 2d at least?

My attempt at a solution involves guiding d3 through successive additions of nodes, thinking that the introduction of immediate children only would sort out overlap problems more frequently. Here's the animation: http://genepio.org/ontotrek/index2.html?ontology=agro

That didn't work - overlaps still occur - it seems in the d3 algorithm that when new nodes are placed into the graph, their position is in the first rendering cycle, not just random , but rather frame-shifted as well, i.e. all new points are given the same big displacement during each animation sequence in addition to their own random position. Can that be overridden within 3d-force-graph? You can see it happening in about 4th cycle of above animation.

I tried to position child nodes within a tighter randomized square with relation to parent - rather than starting a new node off anywhere in graph space. But this doesn't seem to be working either. Perhaps I'm doing that wrong?

Public-Health-Bioinformatics commented 6 years ago

P.s. If the d3 algorithm is run on the tree in one go, without any successive depth-first presentation of the nodes, one gets this hairball:

screen shot 2018-09-16 at 10 36 52 am

So the successive depth presentation of nodes is getting better, but the randomized bulk frame-shift of new nodes is still confounding things especially towards end, making the whole thing look like a weeping willow:

screen shot 2018-09-16 at 10 39 45 am

One note - the yellow nodes have their positions fixed, but I don't think that is influencing things. Same problem happens without fixed position nodes.

Regards, Damion

vasturiano commented 6 years ago

Hi Damion, have you tried using a collision force, to prevent nodes from overlapping? Here's an example that uses a collision detection force. And here's the source.

Public-Health-Bioinformatics commented 6 years ago

OMG, all I had to do - from your cue - was set " .d3Force('center', null) " as in your example... so I suspect bulk offset has to do with the addition of new points in graph changing centre of mass which is then factored into coordinate of first animation batch sequence rendering ... But I will investigate collision force too as you say, as there are still a few crossover spots. Thanks so much ! New graph without 'center' :

screen shot 2018-09-16 at 12 49 18 pm

Thank you so much - and on a sunday!

klaraseitz commented 5 years ago

I have a similar issue. I would like my graph to not overlap. I also turned off the center force and enabled collision between nodes. But still the following occurs: flatStarOverlapped By dragging I can resolve this issue and get something close to the desired output: flatStarPositioned But I would like to get this result immediately when loading the graph.

Maybe there is a way to add collision to links?

vasturiano commented 5 years ago

@klaraseitz is you graph data acyclical? If so, you might want to try a DAG layout, may give you results closer to what you expect. Look into the dagMode property. Alternatively you can curate some of the nodes positions manually by setting fx, fy and fz attributes on the node objects. The force layout will respect those settings and fix them to the specified coordinates.