本文详解如何在 d3 v3 中为甜甜圈图（donut chart）正确绑定数据，解决 `d.data` 为 `undefined` 的常见问题，并确保 `mouseenter` 事件中能安全访问原始数据以支撑 tooltip 功能。
在使用 D3.js（尤其是 v3 版本）构建交互式甜甜圈图时，一个高频陷阱是：事件处理器中无法通过 d.data 访问原始数据。如问题所示，onMouseEnter(d) => console.log(d.data) 输出 undefined，而错误地依赖 d.explicitOriginalTarget.__data__ 不仅破坏代码健壮性，也违背 D3 数据驱动设计原则。
根本原因在于 D3 的数据绑定作用域（context）未被正确保留。在原代码中：
gElement
.selectAll("path")
.data(chartPie)
.enter()
.append("path")
// ... 链式调用后，.on() 绑定在 gElement 上
gElement.on("mouseenter", onMouseEnter); // ❌ 错误：gElement 无数据！gElement 是
✅ 正确做法是：将 selectAll().data().enter().append() 的链式结果保存为变量（如 paths），再对其统一绑定事件：
const paths = gElement
.selectAll("path")
.data(chartPie)
.enter()
.append("path");
paths
.attr("class", "donut_chart")
.attr("fill", d => color(d.data[0])) // ✅ d.data 现在有效！
.attr("d", chartArc)
.each(function(d) { this._current = d; })
.on("mouseenter", onMouseEnter) // ✅ 绑定到 path，d 即饼图扇形数据
.on("mouseleave", onMouseLeave);此时，在 onMouseEnter(d) 中：
- d 是 chartPie 数组中的一个对象（如 { data: ["high", 3], value: 3, startAngle: ..., endAngle: ... }）；
- d.data[0] 是键名（如 "high"），d.data[1] 是数值（如 3）；
- 可直接用于 Tooltip 渲染：tooltip.html(Value: ${d.data[1]} (${d.data[0]})).
⚠️ 注意事项：
- 避免 explicitOriginalTarget：该属性非标准、不可靠，且在 Shadow DOM 或未来浏览器更新中可能失效；
- .each() 初始化 _current 必须在 .on() 之前，否则过渡动画 arcTween 将无法读取初始状态；
- D3 v3 中 d3.layout.pie() 返回的数据项结构固定：d.data 指向原始输入项（即 Object.entries() 后的 [key, value] 数组），务必据此访问；
- 若需支持 Tooltip 定位，建议结合 d3.mouse(this) 获取鼠标坐标，并动态设置 tooltip 的 left/top 样式。
完整可运行示例（含基础 Tooltip）：
function onMouseEnter(d) {
const [key, value] = d.data;
tooltip
.style("opacity", 1)
.html(`${key}: ${value}`)
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 10) + "px");
}
function onMouseLeave() {
tooltip.style("opacity", 0);
}
// 初始化 tooltip（添加到 body）
tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "#333")
.style("color", "white")
.style("padding", "6px 12px")
.style("border-radius", "4px")
.style("font-size", "14px")
.style("pointer-events", "none")
.style("opacity", 0);总结：D3 数据绑定的核心是「在哪绑定，就在哪使用」。始终将交互事件（on("mouseenter")）绑定到已执行 .data(...).enter().append(...) 的具体元素（如 path）上，而非其父容器（如 g），才能确保 d 参数携带预期数据，为 Tooltip、高亮、钻取等交互功能奠定坚实基础。
