[英]d3.js - circle pack layout with nested g nodes
I'm trying to implement the circle packing example: http://bl.ocks.org/4063530 - but I want it to use nested "g" nodes so it's easier to style and control visibility of children of each circle - but in this example, all nodes are at the same depth in the dom. 我正在尝试实现圆包装示例: http : //bl.ocks.org/4063530-但我希望它使用嵌套的“ g”节点,以便更轻松地设置样式和控制每个圆的子级的可见性-但在在此示例中,所有节点在dom中的深度相同。 How do I nest them?
如何嵌套它们? Or, if not nesting, how do I select only the direct children of a circle (not all children of all circles).
或者,如果不嵌套,如何只选择一个圆的直接子代(而不是所有圆的所有子代)。 I've currently modified the example to add a class with the object's depth, like this:
我目前已修改示例,以添加具有对象深度的类,如下所示:
d3.json("skills.json", function(error, root) {
var node = svg.datum(root).selectAll(".node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) { return "node node"+ d.depth; })
and now want to do this: 现在要执行此操作:
d3.selectAll(".node1").on("mouseover",function(){
d3.select(this).classed("active",true).//SELECT ALL CHILDREN OF THE HOVERED NODE HERE
Anyone have any ideas? 有人有想法么?
I could not come up with a way of nesting g elements after pack
ing the data, so here is a not so elegant solution: pack
数据后,我无法想出一种嵌套g元素的方法,所以这不是一个很优雅的解决方案:
function checkParent(d, w) {
if(!d.parent) return false;
if(d.parent == w) {
return true;
} else {
return checkParent(d.parent, w);
}
}
node.on("mouseover",function(d){
d3.select(this).classed("active",true);
d3.selectAll(".node")
.filter(function(w){ return checkParent(w, d); })
.classed("active",true);
});
node.on("mouseout",function(d){
d3.select(this).classed("active",false);
d3.selectAll(".node")
.filter(function(w){ return checkParent(w, d); })
.classed("active",false);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.