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"
});
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;
}