How to combine tree and forces on the edges as in the force directed graph?

[c28686]

Dear all,

I would like to combine the ideas of a tree (nodes only in one direction, non overlapping along the y-Axis, see http://bl.ocks.org/robschmuecker/7880033) with forces on the edges as done in the force directed graph (https://bl.ocks.org/mbostock/4062045).

As a result, I would like to see a tree, where my nodes are non overlapping on the y-Axis and where forces are applied on the edges, such that some nodes are closer to one another than others.

Well, I have no idea how to do this... Could anyone help me?

Thanks a lot,

Chris

[c28686]

PS: I would prefer straigth edges to curves ones!

[Gordon Woodhull]

I haven't seen constraint-based layout (where edges point in a specific direction) done with d3-force. I imagine it's possible though. I think you would have to add another force, like the ones listed here [1].

You might check out cola.js, which is all about constraint-based layout. [2]

Or there is also dagre, which is about directed graph drawing but it's not force-directed, it's a completely different algorithm. [3]

There are a lot of ways to approach graph drawing, all valid for different applications. There are even more ways to draw trees. Not sure exactly what effect you're after with your question.

[1] https://github.com/vasturiano/d3-force-registry/blob/master/README.md

[2] https://ialab.it.monash.edu/webcola/examples/unix.html

[3] https://github.com/dagrejs/dagre-d3

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[c28686]

Dear Gordon,

thanks for your help. I think cola.js is quite similar to what I am looking for. The main difference is, I would like to end up with a tree instead of a network, but that should be adaptable by just adding less edges.

To give you a better picture of what effect I am after: The tree is meant to support product portfolio planning. Every node is a potential product decision (do/don't) and the arcs are precedence relations between those decisions. Arcs can have different lengths (forces on the edges). The lengths can be interpreted as there is a synergy, if you decide for both products. The question to be answered is which products should be developed. If they are developed, the sequence of products has to be considered.

We already have a prototype of d3 force directed graph which fits into the look and feel of our application. The main idea is no to just use this graph and force it into some tree layout instead of using some other library. Hence, could you recommend a simple approach to force the directed graph into some tree layout?

Thanks

Chris