D3.js 鼠标悬停在圆环图中的文本答案

【问题标题】：D3.js Mouseover text inside donut chartD3.js 鼠标悬停在圆环图中的文本
【发布时间】：2026-02-15 14:25:01
【问题描述】：

但不确定我的问题发生了什么并且非常卡住。

我正在构建具有多种布局的数据可视化。我目前正在尝试制作一个中间居中文本的饼图，每当有人将鼠标悬停在弧上时，它就会在中心显示它的文本。

function GUP_PieRender() {

var svg = d3.select(targetDOMelement).append("svg")
   .attr("width", width)
   .attr("height", height)
 .append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(dataset))
.enter().append("g")
  .attr("class", "arc")
  .on("mouseover", function(d) { d3.select("text").text(d.data.ResearchArea)}); //Problem area

g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.data.ResearchArea); });

g.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle"); 
}

它所做的是在另一个具有文本的 D3 条形图布局中显示文本。所以我一定是过早地调用 mouseover 事件并将其附加到其中的最后一个文本元素？

我可以得到补救吗？

谢谢。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

这里的问题（在您的“鼠标悬停”处理程序中）很简单：

d3.select("text")

当您执行此操作时，D3 会选择它在该页面中找到的 第一个 文本元素。显然，你不希望这样。

因此，只需这样做：

g.select("text")

这样，您只选择 g 选择中的文本元素。

或者，您也可以这样做：

d3.select(this).select("text")

因为this 在此上下文中是组元素。

这是一个演示（我正在尝试模仿你的代码）：

var data = ["foo", "bar", "baz"];
data.forEach(function(d) {
  render(d);
})

function render(data) {
  var svg = d3.select("body")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);

  var g = svg.selectAll(null)
    .data([data])
    .enter()
    .append("g")
    .on("mouseover", function(d) {
      g.select("text").text(String)
    })
    .on("mouseout", function(d) {
      g.select("text").text(null)
    })

  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 20);

  g.append("text")
    .attr("x", 25)
    .attr("y", 20);
}

svg {
  background-color: tan;
  border: 1px solid darkgray;
  margin-right: 10px;
}

circle {
  fill: teal;
}

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：