在鼠标悬停d3js上更改SVG文本的文本

Question

Hi I am trying to change text of an SVG text element on mouseover. My code looks like this :

            svg.append("text").attr("x",x).attr("y",y).text(a+'C'+(b+1)).attr("fill","blue").attr('text-anchor',"middle").on("mouseover",function(d){
                console.log("ho ho");
            });

I can see the logs being printed but I am not able to change the text for svg.append("text") Can anyone give me some hints ?

I have also put my code on jsfiddle http://jsfiddle.net/cma0h6zh/

Answer 1

From inside the mouseover handler, where you console.log("ho ho") , d3 sets up the this keyword such that it points to the DOM node that received the event, ie <text> in your case.

So you can do whatever DOM-ish stuff you want with it, including wrapping it in a d3 selection and calling d3 methods on it:

d3.select(this)
  .attr('fill', 'red')
  .text('X')

Here's a modified fiddle