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

Question

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

这是样本:

这是我的代码.

我收到错误了

TypeError: node.parent.children is undefined

Answer 1

如在该文档中所描述束布局,该布局被应用于阵列的链接,每一个都具有一个source和target属性指向在链路的两端的结点.此外,这两个节点每个都需要一个parent指向层次结构中父节点的属性.

这个数据(理想情况下)来自群集布局,它在捆绑链接之前定位节点.集群布局将生成捆绑布局所需的数据(该cluster.nodes函数返回的节点不仅仅包含parent属性,并cluster.links返回带有source和的链接target).这意味着你只需要让群集布局变得愉快,你就可以了.

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

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

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

您还要添加一个名为空字符串的根节点.这是因为在第1481行,find无论子串的长度如何,都会调用它.通过检查调用的返回值,lastIndexOf您将知道节点是否具有父节点,在后一种情况下,设置parent为null(如文档所述,父节点 - 父节点,或根节点为null).

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

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

它的长短是,阅读文档,使用您的调试器,不要花时间去理解它,不要复制粘贴代码.

的jsfiddle