D3树可视化中节点圆颜色的转换
D3树可视化中节点圆颜色的转换
提问于 2014-06-18 18:57:41
我遇到了一个问题，当我折叠节点时，其他节点的笔画颜色也会发生变化(当它们不应该的时候)。提示似乎是，正在折叠的树分支的颜色将“向下”转移到较低分支中的节点。
您可以通过单击"Node 1“来查看问题。结果表明，节点2和3的颜色向下移动到4和5.4，5移动到6和7，等等。
有趣的是，您重新选择了"Node 1“来展开分支，所有颜色都回到了原来的正确状态。
注意:树的可视化和源代码可以在：http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/上看到
我有与节点相关的“循环”元素，我在三个代码块中处理这些元素：
块#1:
nodeEnter.append("svg:circle")
.attr("cx", horizontalTreeOffset)
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue"
: "#fff"; });块#2:
nodeUpdate.select("circle")
.attr("r", 5.5)
.style("stroke", function(d) { return color_hash[d.type]; })
.style("stroke-width", 3)
.style("fill", function(d) {
if(d._children)
{ return color_hash[d.type]; }
else
{ return "white"; }
}
)
.attr("type_value", function(d, i) { return d.type; })
.attr("color_value", function(d, i) { return color_hash[d.type]; });块#3:
nodeExit.select("circle")
.attr("r", 1e-6);任何你能提供的帮助都是非常感谢的。
Stack Overflow用户
回答已采纳
发布于 2014-06-19 02:43:23
找到了..。
tree.nodes()方法遍历链接并生成自己的一组节点。这与用户传递给程序的节点列表完全不同，后者包含每个节点的所有特征。因此，必须从原始节点集中提取原始特征，并将其合并到D3生成的节点(缺少这些特征的节点)中。
当代码为每个转换输入update()方法时，旧代码将遍历节点并根据它们的索引进行合并。但是，由于总节点的数量较少(由于折叠的节点)，索引现在“移动”。而且，过渡节点已经经历了将它们的特征分配给它们的过程，所以没有理由再这样做。
合并的新代码如下..。
// Normalize for fixed-depth.
//nodes.forEach(function(d) { d.y = d.depth * 180; });
if(!nodes[0].name){
nodes.forEach(function(d, i){
d.y = d.depth * 180;
d.name = nodeSet[i].name
d.type = nodeSet[i].type
d.hlink = nodeSet[i].hlink
d.rSize = nodeSet[i].rSize
})
}
else{
nodes.forEach(function(d, i){
d.y = d.depth * 180;
})
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24293124
复制相关文章
相似问题
腾讯云开发者
