.style дочерних узлов в d3js

Question

Я пытаюсь сделать простой граф с узлами и ссылками. У меня есть «g» элементы, содержащие круг и его текст, а ссылки - сами по себе. Я, к примеру, этот бит на коде вызывается на событии наведения курсора мыши:

//check if circle is connected to current "viewed" (mouseover-ed) 
//circle via a link referenced by "that" and paint it green if so 
circles.filter(function() { 
     return d3.select(this).attr("index") == d3.select(that).attr("src"); 
     }).attr("viewed",1).style("stroke", "green"); 
        }); 

Это был действительно длинный выстрел в качестве узлов является «г» элемента контейнера, и я не был уверен, что называя .style бы , но, к моему удивлению, он изменил цвет - но только для текста!

Есть ли способ заставить его изменить стиль штриха круга?

Код декларации:

var circles = svg.append("g") 
    .attr("class","nodes") 
    .selectAll("circle") 
    .data(graph.nodes) 
    .enter() 
    .append("g") 
    .attr("transform",function(d,i){d.x = getX(i);d.y=getY(i);return "translate(" + d.x + "," + d.y + ")";}) 
    .attr("name", function(d){return d.name;}) 
    .attr("viewed", 0) 
    .attr("focused", 0) 
    .attr("index", function(d, i) {return i;}); 


circles.append("circle") 
    .style("stroke", "gray") 
    .style("fill", "white") 
    .attr("r", node_radius_wo_pad) 
    .on("mouseover", function(){...}; 


circles.append("text") 
     .attr("text-anchor","middle") 
     .text(function(d){return d.name}); 

Answer 1

Причина это работает в том, что вы явно не объявлен цвет обводки для текста и поэтому он наследует, что вы установили для родительского g элемента. Чтобы сделать эту работу для кругов, вы должны их явно выбрать:

var toChange = circles.filter(function() { 
     return d3.select(this).attr("index") == d3.select(that).attr("src"); 
    }); 
toChange.attr("viewed", 1); 
toChange.selectAll("circle").style("stroke", "green"); 
toChange.selectAll("text").style("stroke", "green");