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

Change text for an SVG text on mouseover d3js

本文关键字：文本 SVG 鼠标 悬停 d3js      更新时间：2023-09-26

嗨，我正在尝试更改鼠标悬停上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/

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

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

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

这是一个经过修改的小提琴

相关文章：