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（本）.append（ “文本”）。文本（d.name）

没有任何反应。

我认为可以这样做，但我不知道我做错了什么。

Answer 1

您无法将文字附加到圈子中。你需要从g开始并将圆圈附加到g并将文本附加到g。请记住，g不具有cx / cy属性，因此您需要将该数据放入以下语法中：

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

如果您正在绑定数据，请将其绑定到g，然后将裸体将圆圈和文本附加到g。

在鼠标悬停时附加文本时出现D3问题

1 个答案: