javascript - d3 js 分层边缘捆绑数据格式

Question

我正在尝试使用分层边缘捆绑将 url 可视化为 targetURL。这些列之间需要什么类型的关系？

这是示例：

这是我的代码。

我收到一个错误

TypeError: node.parent.children is undefined

Answer 1

如Bundle Layout的文档中所述，布局应用于链接数组，每个链接都有一个sourceandtarget属性指向链接两端的节点。此外，这两个节点都需要一个parent指向层次结构中父节点的属性。

该数据（理想情况下）来自Cluster Layout，它在捆绑链接之前定位节点。集群布局将生成捆绑布局所需的数据（该cluster.nodes函数返回的节点不仅仅是parent属性，还返回带有和cluster.links的链接）。这意味着您只需要使集群布局满意就可以了。sourcetarget

您编写的代码存在一些问题。通常，与其修改数据以适应您从示例中复制粘贴的可视化效果，不如更新各种 D3 访问器以使用您拥有的数据格式。这就是他们在那里的原因。

您从中复制的可视化在其数据清理方面更加一致，因此您在那里引入了一些问题。我们将解决它们，但您可能应该花一些时间来解决问题。第一个问题是您指出的错误：TypeError: node.parent.children is undefined. 这是因为您正在进入第 1483 行find并尝试将一个子项添加到一个不存在的列表中。我们可以继续并通过添加一个特定的检查来完成这里（尽管，如前所述，您实际上应该清理它的处理方式）：

if (typeof d.children === 'undefined') {
    d.children = []
}

此外，您正在添加一个带有空字符串名称的根节点。这是因为在第 1481 行，find无论子字符串的长度如何，您都会调用。通过检查调用的返回值，lastIndexOf您将知道节点是否有父节点，在后一种情况下，设置parent为null（如文档所述，parent - 父节点，或 null 为 root）。

一旦我们解决了这些问题，您将开始看到TypeError: n is undefined. 这是因为您的数据不完整：您引用了不存在的节点，因此在第 1510 行添加了一个没有target属性的链接，因此当您尝试捆绑链接时，布局失败。暂时可以通过仅添加指向存在的节点的链接来忽略此问题，但同样，您可能应该实际解决此问题，而不是任其自然。

if (i in map) {
    imports.push({ source: map[d.name], target: map[i] });
}

总而言之，阅读文档，使用调试器，不要在不花时间理解的情况下复制粘贴代码。

jsfiddle