javascript - Proper way to select child nodes in D3 - Stack Overflow

admin管理员组

文章数量:1316980

I have created a SVG element with some nodes:

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:

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?

I have created a SVG element with some nodes:

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:

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?

• javascript
• svg
• d3.js

Share Improve this question Follow edited Mar 9, 2016 at 14:54 Eduard Luca 6,6121818 gold badges8888 silver badges142142 bronze badges asked Jun 4, 2015 at 5:44 DmitryDmitry 2,14944 gold badges1818 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

d is the data object and i the index. Both are not d3 instances that provide access to any of the d3 select functions.
Try this:

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

本文标签： javascriptProper way to select child nodes in D3Stack Overflow