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

Question

Hi I am playing with d3 , please see the following code i used to draw circles bounded with my data and than for each circles i added text. it works fine for me however as of my requirement i want to change access this appended text e in mouseover event of circle, actually i wish to change the color of the appended text to black to show this circle is selected. the code does not give any error but also does not access the appended text as nothing happens . Any suggestion

 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" 

     });

score 0 · Accepted Answer · answered Jan 27 '16 at 22:52

The code adds a new text node into each group on each mouseover event. Suppose to add text once and change color on event. Also it can be done with css.

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

css:

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

Plunk

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

1 Answers1