D3饼图鼠标悬停填充扇段功能仅部分生效问题求助

嘿，我来帮你搞定这个悬停效果的小问题～

你遇到的情况是：鼠标悬停时所有扇形都变成红色，而不是只有当前悬停的那个，对吧？问题出在你对arc这个选择集的操作上——arc是所有.arc元素的集合，所以调用arc.style("fill","red")会把所有扇形都改成红色，这可不是你想要的效果。

修正方案 #

你需要精准定位到当前触发鼠标事件的那个扇形元素，这里可以用this（它指向当前触发事件的DOM节点），然后选中它内部的path来修改样式。另外，建议加上mouseout事件，让鼠标离开后恢复原颜色，不然扇形会一直保持红色：

var pie = d3.pie()
  .sort(null)
  .value(function(d) { return +d.value; });
var path = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0.65*radius);
var arc = g.selectAll(".arc")
  .data(pie(data))
  .enter()
  .append("g")
  .attr("class", "arc")
arc.append("path")
  .attr("d", path)
  .attr("fill", function(d, i) { return colours[i]; })
  // 修正后的鼠标事件处理
  .on('mouseover', function(event, d) {
    console.log('over');
    // 只修改当前悬停的扇形颜色
    d3.select(this).style("fill", "red");
  })
  .on('mouseout', function(event, d) {
    // 鼠标离开后恢复原颜色
    d3.select(this).style("fill", colours[d.index]);
  });

关键细节解释 #

1. this的作用：在D3的事件回调里，this指向触发当前事件的DOM元素（也就是你悬停的那个path元素），所以d3.select(this)能精准选中它，而不是所有扇形。
2. 恢复原颜色：在mouseout事件里，我们通过d.index拿到当前数据对应的索引，再从colours数组里取原来的颜色赋值回去，保证样式能正常还原。

内容的提问来源于stack exchange，提问作者Alex