combining force and pack layouts in d3
Asked Answered
S

0

8

I have a graph represented with a standard force layout.

Nodes can be clustered by attributes.

Can I represent these clusters with a pack layout?

How will the 2 layouts coexist and how will the x and y coordinates of my nodes be calculated?

edit
I'm thinking I might have to process my data to turn node clusters into individual nodes containing the cluster hierarchy as attribute. I would still welcome an alternative way that doesn't force me to reshape my data if possible.

Here is an example dataset that I transformed to fit into a multi layout approach. The issue here is that I cannot link any of the nodes inside the cluster.

{
    "directed": true,
    "graph": [],
    "nodes": [
        {
            "id": "node0"
        },
        {
            "id": "node1"
        },
        {
            "id": "node2",
            "tree": {
                "name": "cluster",
                "children": [
                    {
                        "id": "node3"
                    },
                    {
                        "id": "node4"
                    },
                    {
                        "id": "node5"
                    }
                ]
            }
        }
    ],
    "links": [
        {
            "source": 0,
            "target": 1
        },
        {
            "source": 1,
            "target": 2
        },
        {
            "source": 0,
            "target": 2
        }
    ],
    "multigraph": false
}
Swanee answered 26/6, 2014 at 17:7 Comment(4)
The two layouts can coexist. The idea is that you have g elements for the nodes in the force layout. For everything within, the coordinates/dimensions are set by the pack layout.Noway
Can you attach an example of your data that is driving force layout?Shishko
Reno, here is a simple example that puts a force layout inside each node of an outer force layout. It uses the method that Lars described. You can use that as a model, but use a pack layout instead of the inner force layout. (I also have an example that uses a pack layout inside each node of a force layout, but it's not on the web now. It's a bit messy to put into jsfiddle, and you would have to wade through a lot of unnecessary code--written when I was even more of a newbie than I am now. However, if you really need to see it, I can post it somewhere.)Ambler
Hey Mars @renaud, I am also stuck in similar case like yours. Can you guys help me how to proceed? Would be great if you can share your code.Contravention

© 2022 - 2024 — McMap. All rights reserved.