有没有办法在具有固定节点的 d3 中创建静态有向图？

Question

So I need to create a static directed graph that depicts the process of creating something. Its children can point to the same stage but doesn't have to. What's important is that in the end, all the children branches point to the same final stage.

Its final look if it comes to the structure should be something similar to the photo below

https://imgur.com/a/BXr44GO

So until now, I have experimented with the force layout graphs from d3. I have searched for examples and similar questions here, but none of them referred to my specific problem. However, I'm not an expert in d3, so maybe I was doing something wrong, or I missed something, that's why I'm coming here because nothing else comes to my mind.

Some of the examples: https://bl.ocks.org/mbostock/3750558https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8

My main issue with the d3 force layout graphs is that I have no clue how to make them static and spam each time in the same position without floating around like they are on the examples.

So my question would be, is it possible to make the graph as provided in the image above with d3 force layouts, or should I just work on creating my custom layout that would present graph in the manner that I need.

If it's possible, I would kindly ask for a piece of advice on how should I proceed with this kind of graph.

Answer 1

I think that what you are looking for is d3-sankey , you can find more examples here

If you use force simulation. you will have to calculate the position of each node and 'fix' them like here and also work in a static force simulation, which is basically the same, but you control how many times the force is 'run', like here , take a look at the following lines:

// Run the layout a fixed number of times. // The ideal number of times scales with graph complexity. // Of course, don't run too long—you'll hang the page! force.start(); for (var i = n * n; i > 0; --i) force.tick(); force.stop();