CODEWITHSUNDEEP
javascriptsvgd3.js
manugupt1
manugupt1

Reputation: 2437

Change text for an SVG text on mouseover d3js

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/

Upvotes: 0

Views: 509

Answers (1)

meetamit
meetamit

Reputation: 25157

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, i.e. <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

Upvotes: 1

Related Questions