Question

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

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

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

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

我已经合并了两种类型的数据（在开头的评论中，将替换当前变量＆＃34;类＆＃34;）：

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行孩子就可以了。我想以后我会这样做。

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

Answer 1

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

根据我从问题中解释的内容，

TL; DR ：Here的外观如何。添加了一些用于测试的数据。

Hierarchical Edge Bundling，提供了一种可视化图形中非分层边缘的方法。如果你还没找到，那么这篇论文的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来可视化非等级关系（由示例中的导入表示）和＆lt; Radial Reingold-Tilford＆＃39;用于等级关系。

以下是如何做到这一点：

数据格式需要不更改为您提议的内容。下面应该没问题：

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

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

1 个答案: