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


疯子哥哥
2025-03-18 05:48:35 (3天前)
  1. 我正在尝试使用层次结构将url可视化为targetURL


边缘
</跨度>
捆绑。这些列之间需要什么类型的关系?

这是样本:

这是我的代码。

我收到错误了

TypeError:node.parent.children未定义

2 条回复
  1. 0# 不浪漫 | 2019-08-31 10-32



    如文档中所述

    捆绑布局

    ,布局应用于数组

    链接

    ,每个都有一个

    source



    target

    指向链接两端节点的属性。另外,这两个节点都需要一个

    parent

    指向层次结构中父节点的属性。



    这个数据(理想情况下)来自

    群集布局

    ,在链接捆绑之前定位节点。群集布局将生成捆绑布局所需的数据(

    cluster.nodes

    函数返回的节点不仅仅是

    parent

    财产和

    cluster.links

    返回链接

    source



    target

    )。这意味着你只需要让群集布局变得愉快,你就可以了。



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



    您复制的可视化在其数据清理中更加一致,因此您在那里引入了一些问题。我们只是解决它们,但你应该花一些时间来做对。第一个问题是您注意到的错误:

    TypeError: node.parent.children is undefined

    。这是因为你要进入1483号线

    find

    并尝试将子项添加到不存在的列表中。我们可以通过为此添加一个特定的检查来继续通过这里(虽然,如上所述,你应该实际上只是清理如何处理):




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

    2. </code>


    您还要添加一个名为空字符串的根节点。这是因为在第1481行你打电话

    find

    无论子串的长度如何。通过检查调用的返回值

    lastIndexOf

    您将知道节点是否具有父节点,在后一种情况下,设置

    parent



    null

    (如

    文件

    状态,

    parent - 父节点,或root的null

    )。



    一旦我们解决了这些问题,你就会开始看到

    TypeError: n is undefined

    。这是因为您的数据不完整:您有对不存在的节点的引用,因此在第1510行您添加了一个没有的链接

    target

    属性,因此当您尝试捆绑链接时,布局将失败。暂时只需添加指向现有节点的链接就可以忽略这一点,但同样,你可能应该实际修复它而不是让它成为现实。




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

    2. </code>


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




    的jsfiddle


登录 后才能参与评论