position nodes in force layout graph vertically

Question

I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.

I have an object with nodes and links.

I' trying to create a graph which would show all the nodes top to bottom. I was looking at the example code from here:

https://github.com/danielstern/force-graph-example

Here's a screenshot of the result:

I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.

Here's an image to illustrate it:

Right now, all the nodes are scattered randomly.

I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.

I looked at this example which looked promising:

How to organise node positions in D3 Force layout

But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.

I was also looking at thes post:

d3.js - How can I expand force directed graph horizontally?

According to @Lars Kotthoff: "The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".

Since my graph is not really a tree, I don't think the tree view would match.

What would be my best approach to position the nodes?

Or perhaps there's a better library to achieve what I need?

Answer 1

I found this package:

d3-dag

It basically supports what I need:

"Often data sets are hierarchical, but are not in a tree structure..."

Here's an exmaple:

exmaple