d3.js 结合 Hierarchical Edge Bundling 和 Radial Reingold–Tilford Tree + 数据答案

【问题标题】：d3.js combining Hierarchical Edge Bundling and Radial Reingold–Tilford Tree + datad3.js 结合 Hierarchical Edge Bundling 和 Radial Reingold–Tilford Tree + 数据
【发布时间】：2016-08-25 16:35:03
【问题描述】：

我想（在某种程度上）将Hierarchical Edge Bundling 和Radial Reingold–Tilford Tree 结合起来

看起来有点像这样（请原谅我糟糕的paint.net技能）*：

*孩子们应该在弧形中，就像在树中一样。

我已经设置了这个在 HEB 中显示简单数据的小提琴：https://fiddle.jshell.net/d1766z4r/2/

我已经把这两种类型的数据结合起来了（一开始是在cmets中，会替换掉当前的变量“classes”）：

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 的方法（也可以就此提供建议，但如果可以的话，以后可能会成为一个新问题'不知道怎么做），因为我将不得不处理大量数据，首先证明孩子是合理的。

最后，每个孩子都可以拥有自己的孩子，但目前 1 行孩子就足够了。我想我稍后会谈到。

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

【问题讨论】：

标签： javascript css json d3.js

【解决方案1】：

我可能完全不符合您的要求，请澄清是否是这种情况。

TL;DR：Here 是它的外观，基于我对问题的解释。已添加更多数据进行测试。

Hierarchical Edge Bundling，提供了一种可视化图表中非分层边的方法。这是在d3中实现的论文的link，如果你还没有找到。

在example 中，通过过滤其他节点只显示叶节点：

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

示例中的层次关系由名称中的点表示，因此 cluster1 是 item1、item2 和 item3 的父级。 Here 是我们在添加节点时移除过滤器的样子。

现在，我对您的问题的解释是，您想使用 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 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 功能以突出显示分层节点，尝试将鼠标悬停在任何父节点上。

【讨论】：