.style d3js 中的子节点答案

【问题标题】：.style of child nodes in d3js.style d3js 中的子节点
【发布时间】：2014-02-28 09:19:34
【问题描述】：

我正在尝试用节点和链接制作一个简单的图表。我有“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");
                     });

这真的是一个很长的镜头，因为节点是“g”元素容器，我不确定调用 .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});

【问题讨论】：

标签： svg d3.js

【解决方案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");

【讨论】：