Правильный способ выбрать дочерние узлы в D3

Question

Я создал 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"); 

В 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 
} 

Что такое способ получить дочерний узел с d3?

Answer 1

d - объект данных и индекс i. Оба не являются экземплярами d3, которые предоставляют доступ к любой из функций d3 select.
Попробуйте это:

myelement.on('mouseenter', function(d,i) { 
    d3.select(this).select('circle'); 
});