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

Question

您好，我想在鼠标悬停时更改 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/

Answer 1

从鼠标悬停处理程序内部，您 console.log("ho ho")，d3 设置 this 关键字，使其指向接收事件的 DOM 节点，即 <text> 在你的情况下。

因此您可以用它做任何 DOM-ish 的事情，包括将它包装在 d3 选择中并在其上调用 d3 方法：

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

这是一个modified fiddle

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

Change text for an SVG text on mouseover d3js

javascript

svg

d3.js