如何使用d3更改添加到圆圈的附加文本颜色

Question

你好，我正在玩 d3，请看下面的代码，我用我的数据绘制圆圈，然后为每个圆圈添加文本。它对我来说很好，但是根据我的要求，我想在圆圈的鼠标悬停事件中更改访问此附加文本 e，实际上我希望将附加文本的颜色更改为黑色以显示已选择此圆圈。该代码没有给出任何错误，但也没有访问附加的文本，因为没有任何反应。任何建议

 var circles = vis.selectAll("circle").data(sampleData);
 var circleEnter=circles.enter().append("g").append("circle");
 circleEnter.attr("cx", 10)
 .attr("cy", 20)
.on("mouseover", function(d,i)
        {
        d3.select(this).append("text")
         .attr("font-family", "sans-serif")
         .attr("font-size", "14px")
         .attr("fill", "red")
         .html("sometext" 
         );           

       }

    circles.append("text")
    .attr("font-family", "sans-serif")
    .attr("font-size", "14px")
    .attr("fill", "lightgray")
     .html("sometext" 

     });

Answer 1

代码在每个鼠标悬停事件上向每个组添加一个新的文本节点。假设添加一次文本并更改事件的颜色。也可以用 css.

来完成

circles.append("text")
  .classed('text', true)
  .html("sometext");

css:

g .text {
  fill: blue;
}
g:hover .text{
  fill: red;
}

Plunk

如何使用d3更改添加到圆圈的附加文本颜色

how to change the appended text color added to a circle using d3

javascript

geometry

appendtext

d3.js