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项所有子项的链接,作为开始开发此项目的方法.

如果可能的话,请更新此小提琴或制作一个新代码以备份您的代码.当然欢迎任何关于如何进行的建议.

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

最后,每个孩子都可以拥有自己的孩子,但现在一行孩子就足够了.我想以后我会这样做.

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

Answer 1

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

\n\n

TL;DR：根据我对问题的解释，这就是它的样子。添加了更多数据进行测试。

\n\n

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

\n\n

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

\n\n

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

\n\n

示例中的层次关系由名称中的点表示，因此 cluster1 是 item1、item2 和 item3 的父级。\n以下是如果我们在附加节点时删除过滤器的情况。

\n\n

现在，我对你的问题的解释是你想使用分层边缘捆绑来可视化非分层关系（在示例中由导入表示）和“Radial Reingold\xe2\x80\x93Tilford\”用于分层关系。

\n\n

以下是如何做到这一点：

\n\n

数据格式无需更改为您建议的格式。下面应该没问题：

\n\n

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

\n\n

采用 packageImports 函数从节点获取层次边缘：

\n\n

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

\n\n

添加来自Radial Reingold\xe2\x80\x93Tilford 示例的径向对角线生成器：

\n\n

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

\n\n

附加分层边路径：

\n\n

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

\n\n

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

\n