gpt4 book ai didi

javascript - 使用 D3.js 的分层力图

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:46:18 32 4
gpt4 key购买 nike

我想使用 D3.js 生成一个分层力图 - 一个力导向图,允许您通过单击节点将图扩展到子级(子级之间的关系是示)。节点可以通过两种方式相互关联,父节点或兄弟节点。父关系表示节点“属于”它们的父节点。

作为起点,我查看了力集群示例: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"}
]
}

Expanding cluster

上图:力图,其中红色链接表示兄弟关系。

也可以将“ child ”安排为 JSON 中的 child ,而不是使用父“类型”:

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

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

一个富有想象力的树状结构看起来像: Tree

下半部分表示所需的视觉布局(与上图中的功能类似)。

您对如何进行有任何建议吗?

最佳答案

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

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

关于javascript - 使用 D3.js 的分层力图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12711207/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com