[英]Proper way to select child nodes in D3
I have created a SVG element with some nodes: 我创建了一个带有一些节点的SVG元素:
gnodes = svg.selectAll("g.node")
.data(_nodes);
var newNodes = gnodes.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(drag)
.on('mouseover', onMouseOver)
.on('mouseout', onMouseOut);
newNodes.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", radius);
newNodes.append("image")
.attr("xlink:href", getImage)
.attr("x", -radius/2)
.attr("y", -radius/2)
.attr("width", radius + "px")
.attr("height", radius + "px");
In the onMouseOver I want to change the colour of highlighted circle, but I can not get this item from the data I receive: 在onMouseOver中我想更改突出显示的圆圈的颜色,但我无法从收到的数据中获取此项目:
function onMouseOver(d, i) {
var c1 = d.select("circle"); // error
var c2 = i.select("circle"); // error
var c3 = d.selectAll("circle"); // error
var c4 = i.selectAll("circle"); // error
}
What is a way to get child node with d3? 使用d3获取子节点的方法是什么?
d
is the data object and i
the index. d
是数据对象, i
是索引。 Both are not d3 instances that provide access to any of the d3 select
functions. 两者都不是提供对任何d3
select
功能的访问的d3实例。
Try this: 试试这个:
myelement.on('mouseenter', function(d,i) {
d3.select(this).select('circle');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.