我想(有点)结合 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 就足够了。我想我稍后再讲。
更新:答案不必是完整的解决方案,每一点(看看我在那里做了什么?)都有帮助!
最佳答案
我可能完全偏离了您的要求,如果是这种情况请澄清。
长话短说: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 函数以突出显示层次节点,尝试将鼠标悬停在任何父节点上。
关于javascript - d3.js 结合分层边缘捆绑和径向 Reingold–Tilford 树 + 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39150514/