使用 D3.js 的层次力图答案

【问题标题】：Hierarchical force diagram using D3.js使用 D3.js 的层次力图
【发布时间】：2024-04-14 07:30:01
【问题描述】：

我想使用 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
    },
.
.

但是，如何在跟踪子节点之间的关系的同时结合树结构？

一个富有想象力的树状结构如下所示：

下半部分表示所需的视觉布局（类似于上图中的功能）。

您对如何进行有什么建议吗？

【问题讨论】：

我遇到了类似的问题。我想显示从大型数据集中单击的节点周围的本地网络。我的解决方案可能会为您提供一些建议：timebandit.github.io/graphSub

标签： javascript d3.js hierarchy force-layout

【解决方案1】：

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

如果您碰巧有仅与其他兄弟节点相关但没有父节点的节点（例如您示例中的 Person 0 和 Person 1 之间的关系），则树布局不是正确的选择。相反，您可能想尝试强制布局。

【讨论】：