来自 CSV 的 D3.js 树布局

Question

我目前正在考虑使用 d3.layout.tree 模块从 CSV 文件构建树布局。我能够复制给定here 的答案。然而，只需将数据修改为如下所示：

source,target
A0,A1
A0,A2
A1,A2
A2,A3
A2,A4

我们发现在调用 tree.node(links) 之后，我们得到了链接数组中第一个元素的以下示例输出（来自 Chrome 开发控制台）

Object
source: Object
children: Array[2]
depth: 0
name: "A0"
x: NaN
y: 0
__proto__: Object
target: Object
children: Array[1]
depth: 1
name: "A1"
parent: Object
x: NaN
y: 440
__proto__: Object
__proto__: Object

对应的节点数组为：

Object
children: Array[2]
0: Object
1: Object
length: 2
__proto__: Array[0]
depth: 0
name: "A0"
x: NaN
y: 0
__proto__: Object

请注意，它在“x”字段中包含“NaN”值。我无法确定为什么这个示例不产生 A0 是具有两个孩子 (A1,A2) 的根，就像 A2 对 (A3,A4) 所做的那样。感谢任何帮助，真的很喜欢 D3。显然这意味着我不会得到想要的树，如何构造树数据结构来提供想要的树？

Answer 1

您上面的数据不是一棵树。使用A1,A2，您正在创建一个循环引用（其中一个节点可以有多个父节点）。如果你的数据是正确的，那么这是一个力导向图，也可以be created in D3。