d3.js结合分层边缘捆绑和径向莱因戈尔德-蒂尔福德树+数据

我想（在某种程度上）结合Hierarchical Edge Bundling和Radial Reingold–Tilford Tree d3.js结合分层边缘捆绑和径向莱因戈尔德-蒂尔福德树+数据

它看起来有点像这样（原谅我可怕paint.net技能）*：

*孩子应该是在一个弧，就像在树中。

我已经安装这个小提琴，显示在HEB简单的数据：https://fiddle.jshell.net/d1766z4r/2/

我已经结合了两种类型的数据（在开始时的意见，将取代当前的变量“类”）：

var classes = [ 
{"name":"test.cluster1.item1","children": [ 
     {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]}, 
     {"name": "test.cluster1.item5"} 
    ]}, 
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]}, 
{"name":"test.cluster1.item3"} 
];

如果有更好的方法来组合数据，请随时相应地更改它。

除了更改数据之外，我不确定如何继续，因为我是d3.js和javascript新手，尤其是当它将链接正确的子项目（项目4），而不是其他项目时项目5）。不过，我会考虑一个答案，将显示项目1的所有孩子的链接作为开始开发这个项目的一种方式。

如果可能的话，请更新这个提琴或制作一个新的代码。当然欢迎任何关于如何进行的建议。

下一步将使这些孩子在点击时显示或隐藏，使用类似于Collapsible Tree的方法（也可以随时给出建议，但如果我不能，那么它可能会成为一个新问题了解如何做到这一点），因为我将不得不使用大量数据，首先为孩子们辩护。

最后，每个孩子都可以有自己的孩子，但是现在有一行孩子就足够了。我会在稍后谈谈。

更新：答案不一定是完整的解决方案，每一点（看看我在那里做了什么？）帮助！

来源

2016-08-25 MorganFR

我可能完全偏离正在询问的内容，请澄清是否属实。

TL; DR：Here是基于我从问题中解释出来的样子。已经添加了更多的数据进行测试。

分层边缘捆绑提供了一种可视化图形中非分层边缘的方法。如果您还没有找到，那么在d3中实现的纸张为link。

在example仅叶节点通过过滤所述其他节点中所示：

node = node 
     .data(nodes.filter(function(n) { return !n.children; })) 
    .enter().append("text") 
     .attr("class", "node")...

在范例层级关系是由在名称点表示，所以cluster1中是ITEM1父，ITEM2和项目3。 Here是我们在追加节点时删除过滤器的样子。

现在，我对你的问题的解释是你想要使用分层边缘捆绑来可视化非层次关系（用例子中的进口表示）和用于分层关系的“Radial Reingold-Tilford”。

这里是如何可以做到这一点：

数据格式需要不改变你什么建议。下面应该没问题：

var classes = [ 
     { 
      "name": "test.cluster1.item1.item4", 
      "imports": ["test.cluster1.item2", "test.cluster1.item3"] 
     }, 
     { 
      "name": "test.cluster1.item1.item5", 
      "imports": [] 
     } 
]

采用packageImports工作以从节点获得分层边缘：

nodes.forEach(function (d) { 
      if(d.children && d.name !== "") d.children.forEach(function (i) { 
       imports.push({ 
        source: map[d.name], 
        target: i 
       }); 
      }); 
     });

从Radial Reingold–Tilford example添加径向对角线发生器：

var diagonal = d3.svg.diagonal.radial() 
       .projection(
         function(d) { 
          debugger; 
          return [d.y, d.x/180 * Math.PI]; 
         } 
       );

追加层次边缘的路径：

treeLink = treeLink 
      .data(getHeirarchialEdges(nodes)) 
      .enter().append("path") 
      .attr("class", "tree-link") 
      .attr("d", diagonal);

我还添加了mouseover和mouseout函数来突出显示分层节点，尝试将鼠标悬停在任何父节点上。

来源

2016-09-01 14:39:30

d3.js结合分层边缘捆绑和径向莱因戈尔德-蒂尔福德树+数据

回答

相关问题