【问题标题】:Create hierarchy from row data从行数据创建层次结构
【发布时间】:2014-12-08 21:43:15
【问题描述】:

我正在尝试为 d3.js 的树形布局创建层次结构,但我有行数据意味着只有链接,并且一些链接确实相互递归,就像链接中的某些时候,两个不同的源具有相同的目标,所以基本 d3 .js 树函数在这种情况下会出现问题。

我还有其他选择吗?

例如。我有这样的数据

{ source: "main1", target: "level 3"}  
{ source: "main2", target: "level 3"}
{ source: "level 3", target: "level 4"}    

所以这将是这样的场景

0     0
 \   /
   0
   |
   0

而且这些不在一个根父级下也意味着树中有两个不同的父级!

任何有用的链接将不胜感激

提前致谢

【问题讨论】:

    标签: javascript arrays d3.js hierarchy data-visualization


    【解决方案1】:

    您是说您有表示任意有向图(可能是无环图?)的数据,并且您想从中创建层次结构。正如您所指出的,它并不代表层次结构。那么你期待什么?我认为您的“问题”的答案是:

    “你不能这样做。你需要使用不需要层次结构的不同可视化。”

    也许您想要一个 DAG 可视化,例如
    https://github.com/nickholub/d3-dag-visualization

    如果您确信您需要一个层次结构,请提供一整套示例数据以及您期望的结果。我们无法从您提供的内容中猜出您想要什么。

    【讨论】:

      【解决方案2】:

      是的,直接使用 d3.js 无法做到这一点,但使用 D3.js 可以使用其他方法

      1) 而不是使用

      tree.links(nodes);
      

      为了获取与每个节点连接的链接,我们可以使用

      d3.layout.hierarchy()
      

      并覆盖

      .links(nodes)
      

      通过我们自己的方法和管理链接连接意味着原始子节点将停留在您想要将其放在它的多个父节点下的位置,并通过提供一些唯一的 id 标识节点并连接它们。 注意:如果您使用示例中的一些复制过去的代码,则需要在此处更改此代码

        var link = svgGroup.selectAll("path.link")
              .data(links, function(d) {
                  return d.target.id;
              });
      

      因为现在它不依赖于子和父所有链接都是他们自己的所以给他们 id 并使用该 id 作为过滤器而不是使用目标 id

      2) 或者您可以自己创建自己的函数并创建一个数组或对象来保存对象,就像链接一样,您只需要根据您的连接逻辑为它们提供源、目标和链接 id。你可以随心所欲地玩它,因为它是你自己的,你可以添加额外的属性等。

      【讨论】:

        猜你喜欢
        • 2013-06-07
        • 2019-03-20
        • 1970-01-01
        • 1970-01-01
        • 2017-04-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多