d3.js - 在鼠标悬停时附加文本时出现 D3 问题

Question

我想在鼠标悬停时显示文本。

var circle = elemEnter.append("circle")
          .attr("r", function(d){return d.r*2} )
          .attr("dx", function(d){return d.x} )
          .attr("stroke","gray")
          .attr("fill", "#91c6ed")
          .on("mouseover", function()
                          {d3.select(this).style("stroke", "#ff7f0e");
               d3.select(this).style("stroke-width", "2px");
               elemEnter.append("text")
                        .text(function(d){return d.name})})
          .on("mouseout", function()
                          {d3.select(this).style("stroke", "gray");
                           d3.select(this).style("stroke-width", "1px");});

这段代码有效，但显示所有圆圈上的所有名称以及当我尝试替换时

elemEnter.append("text").text(function(d){return d.name})

经过

d3.select(this).append("text").text(d.name)

什么都没发生。

我认为有可能做到这一点，但我不知道我做错了什么。

Answer 1

You can't append text to a circle. You need to start with a g and append the circle to the g and append the text to the g. Keep in mind that the g will not have cx/cy attributes and so you'll need to put that data into the following syntax:

.attr("transform", function (d) {return "translate("+d.X+","+d.Y")"})

If you're binding data, bind it to the g and then just naked append the circle and text to the g.