在mouseover d3js上更改SVG文本的文本

时间:2015-03-03 04:34:09

标签: javascript svg d3.js

您好我正在尝试在鼠标悬停时更改SVG文本元素的文本。 我的代码如下所示:

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

我可以看到正在打印的日志,但我无法更改svg.append(“text”)的文本 谁能给我一些提示?

我还将我的代码放在jsfiddle http://jsfiddle.net/cma0h6zh/

1 个答案:

答案 0 :(得分:1)

从鼠标悬停处理程序内部console.log("ho ho")开始,d3设置this关键字,使其指向接收事件的DOM节点,即您的案例中的<text>

所以你可以用它做任何你想要的东西,包括将它包装在d3选择中并在其上调用d3方法:

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

这是modified fiddle