javascript - d3.js 结合分层边缘捆绑和径向 Reingold–Tilford 树 + 数据

Question

我想(有点)结合 Hierarchical Edge Bundling和 Radial Reingold–Tilford Tree

它看起来有点像这样(请原谅我糟糕的 paint.net 技能)*:

* children 应该在一个弧形中，就像在树中一样。

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

我已经合并了两种类型的数据(在开头的注释中，这将替换当前变量“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 项)而不是其他(第 1 项)时5).但是，我会考虑一个答案，该答案将显示指向元素 1 的所有子项的链接，以此作为开始开发它的一种方式。

如果可能，请更新此 fiddle 或制作一个新 fiddle 来备份您的代码。当然，我们欢迎任何关于如何进行的建议。

下一步将使用类似于 Collapsible Tree 的方法使这些子项在单击时显示或隐藏。 (也可以随时就此提出建议，但如果我不知道该怎么做，以后可能会是一个新问题)，因为我将不得不处理大量数据，首先要为 children ​​辩护.

最后，每个 child 都可以拥有自己的 child ，但现在 1 行 child 就足够了。我想我稍后再讲。

更新:答案不必是完整的解决方案，每一点(看看我在那里做了什么？)都有帮助!

Answer 1

我可能完全偏离了您的要求，如果是这种情况请澄清。

长话短说:Here根据我从问题中解释的内容，它看起来如何。已添加更多数据进行测试。

分层边捆绑，提供了一种可视化图中非分层边的方法。这是 link如果您还没有找到，请转到在 d3 中实现的论文。

在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 的径向对 Angular 线生成器:

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