d3.js结合了Hierarchical Edge Bundling和Radial Reingold-Tilford Tree +数据

Question

我想（有点）结合Hierarchical Edge Bundling和Radial Reingold-Tilford Tree

看起来有点像这样（原谅我糟糕的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项所有子项的链接，作为开始开发此项目的方法。

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

下一步将是使用类似于可折叠树的方法让这些孩子在点击时显示或隐藏（随意给出建议，但如果我不知道如何，这可能是一个新的问题这样做，因为我将不得不处理大量数据，首先为儿童辩护。

最后，每个孩子都可以拥有自己的孩子，但现在只需1行孩子就可以了。 我想以后我会这样做。

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

Answer 1

我可能完全偏离你的要求，请澄清是否是这种情况。

TL; DR： 这里是它的外观的基础上，我从这个问题的解释。 添加了一些用于测试的数据。

分层边缘捆绑，提供了一种可视化图形中非分层边缘的方法。 如果你还没找到，这是d3中实现的论文的链接 。

在该示例中，仅通过过滤其他节点来显示叶节点：

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

示例中的分层关系由名称中的点表示，因此cluster1是item1，item2和item3的父级。 在这里 ，如果我们去除过滤器，同时追加节点它的外观。

现在，我对您的问题的解释是，您希望使用Hierarchical Edge Bundling来显示非层次关系（在示例中由导入表示）和'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示例中添加径向对角线生成器：

  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函数来突出显示分层节点，尝试将鼠标悬停在任何父节点上。