从行数据创建层次结构

时间:2014-10-14 07:27:39

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

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

我还有其他选择吗?

对于Ex。我有这样的数据

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

所以这就像这个场景

0     0
 \   /
   0
   |
   0

并且这些不是一个根父母也意味着两个不同的父母在树!

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

提前致谢

2 个答案:

答案 0 :(得分:0)

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

"你做不到。您将需要使用不需要层次结构的不同可视化。"

也许你想要像左派这样的DAG可视化 https://github.com/nickholub/d3-dag-visualization

如果您确信需要层次结构,请提供一整套示例数据,以及您期望的结果。我们无法猜测你想要的东西。

答案 1 :(得分:0)

是的,直接使用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。你可以随意玩它,因为它是你自己的,你可以添加额外的attr等。