Here is an image which represents what I am working on creating using D3. I am having a hard time figuring out what the correct approach is and was hoping for some advice. Please forgive my poor use of terminology which I do not fully understand yet.
The general path I want to go down is a force-directed graph. The image looks strictly hierarchical, but it is not. However, if various weights were assigned just right, this could be a potential output.
The hello (root) node would need to be weighted so it can float to the top.
The AAA, BBB, & CCC nodes will not be vertically aligned but should appear between the root node and the blue containers in a vertical position based upon a weight assigned to them.
The groups of red nodes will not appear in such a clear grid. They could be scattered about in their container based on weights assigned to them as well.
The difficult part of this is how to define those containers ( i.e. M, W, X, N, Y, Z ). It would be nice if the blue containers were top aligned and likewise the gray containers as well. How does one go about creating containers of nodes within D3?
I don’t think that a force directed layout is likely to ever land on something like that diagram. I think you’re much more likely to produce images like that using Mermaid, which is part of the Observable standard library:
@mcmcclur Thanks for the reply. I have investigated the Graphviz route already and Mermaid seems to be similar. In the image above, I did use Graphviz to create it. I was interested in how I could go about using a a force-directed D3 graph to produce something similar.
The primary thing I am not sure how to do is to create the containers for the red nodes and have them stay inside of the container while the force algorithm works itself out. Is something like that even possible? If so, how?
