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和{的链接{1}}）。这意味着您只需要让群集布局变得愉快，就可以了。

您编写的代码存在一些问题。通常，不是修改数据以适合从示例中复制粘贴的可视化，而是更好地更新各种D3访问器以使用您拥有的数据格式。这就是为什么他们在那里。

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

find

此外，您还要添加一个名为空字符串的根节点。这是因为在第1481行，无论子字符串的长度如何，都会调用if (typeof d.children === 'undefined') { d.children = [] } 。通过检查对find的调用的返回值，您将知道该节点是否具有父节点，在后一种情况下，将lastIndexOf设置为parent（如the documentation } states， parent - 父节点，或root 的null。）

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

target

它的长短不一，阅读文档，使用调试器，不要花时间去理解代码，不要复制粘贴代码。

jsfiddle