在鼠標懸停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的工作，包括將其包裝在d3選擇中並在其上調用d3方法：

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

這是改良的小提琴