使用D3.js制作层级力导向图

Question

我想使用D3.js生成分层力导向图，这是一种力导向图，可以通过单击节点来扩展图形到子级（显示子级之间的关系），从而使您可以浏览类似树形结构的内容。节点之间有两种关系：父节点和兄弟节点。父节点关系表示节点“属于”其父节点。

作为起点，我查看了force cluster示例：https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html，并包含了上述关系，但我无法弄清如何仅呈现已展开的集群而不是整个网络（请参见下面的图片）。

JSON data:
{"nodes":
        [
        {"name":"Person 0","group":"Person 0"},
        {"name":"Person 1","group":"Person 1"},
        {"name":"Person 2","group":"Person 1"},
        {"name":"Person 3","group":"Person 1"},     
        {"name":"Person 4","group":"Person 3"},
        {"name":"Person 5","group":"Person 3"}  
        ],
"links":
        [
        {"source":1,"target":0,"type":"sibling"},
        {"source":2,"target":1,"type":"parent"},
        {"source":3,"target":1,"type":"parent"},
        {"source":3,"target":2,"type":"sibling"},
        {"source":4,"target":3,"type":"parent"},
        {"source":5,"target":3,"type":"parent"},
        {"source":4,"target":5,"type":"sibling"}
        ]
}

上图显示了力学图，其中红色链接表示兄弟关系。

也可以将“子节点”安排为JSON中的子节点，而不是使用父“类型”：

{
"nodes": [
    {
        "name": "Person 0",
    },
    {
        "name": "Person 1",
        "children": [
            {
                "name": "Person 2",
            },
            {
.
.
.
"links": [
    {
        "source": 1,
        "target": 0
    },
.
.

然而，如何在跟踪子节点之间的关系的同时组合树形结构呢？

一种想象中的类似树状结构如下图： 下面的部分显示了所需的视觉布局（与上图具有相似的功能）。

你有什么建议吗？

- graphmeter

---

我曾经遇到过类似的问题。我想展示从一个大数据集中点击的节点周围的本地网络。我的解决方案可能会为您提供一些指引：timebandit.github.io/graphSub - timebandit

Answer 1

隐式地，所有具有相同直接父节点的节点都是兄弟节点。因此，您不需要额外跟踪节点是否互为兄弟。

如果您恰好有一些节点仅与其他兄弟节点相关联但没有父节点（例如您示例中Person 0和Person 1之间的关系），则树状布局不是正确的选择。相反，您可能想尝试力导向布局。

- Elvis