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

Question

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

这里是the sample：

这是我的code。

我收到一个错误

TypeError: node.parent.children is undefined

Answer 1

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

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

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

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

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

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

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

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

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

jsfiddle