如何实现D3.js饼图扇区鼠标悬停时的颜色切换效果？

要给饼图扇区添加鼠标悬停时的颜色变化效果，只需在现有的鼠标事件处理逻辑中，同时修改扇区的填充样式即可，具体操作如下：

步骤1：定义高亮规则 #

你可以选择固定高亮色，或者基于原始颜色动态调整（比如加深亮度）：

// 固定高亮色示例
const highlightColor = "#ff7f0e";

// 动态加深原始色示例（需依赖D3颜色处理能力）
// const getHighlightColor = (originalColor) => d3.color(originalColor).darker(0.5);

步骤2：修改鼠标事件绑定 #

在你已有的mouseover和mouseout事件中，添加填充色的切换逻辑：

// 假设你已通过path变量选中所有饼图扇区
path.on("mouseover", function(event, d) {
  d3.select(this)
    .transition().duration(200)
    .attr("d", arcOver) // 保留原有的半径放大效果
    .style("fill", highlightColor); // 添加颜色切换
})
.on("mouseout", function(event, d) {
  d3.select(this)
    .transition().duration(200)
    .attr("d", arc) // 恢复原半径
    .style("fill", color(d.data)); // 恢复原始颜色，这里的color是你定义的颜色比例尺
});

注意事项 #

• 若你的原始颜色存储在数据的其他字段（比如d.color），将color(d.data)替换为对应的字段即可。
• 若使用D3.js旧版本（v5及以下），事件处理函数的参数顺序是(d, i)，而非(event, d)，需对应调整。

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