D3.js 甜甜圈图数据绑定与 Tooltip 正确实现指南

本文详解如何在 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 是 容器，它本身并未绑定任何数据；onMouseEnter 被挂载到 上，因此回调中的 d 实际是 的绑定数据（为空），而非 的数据。D3 的事件回调中，d 始终对应当前触发事件的 dom 元素所绑定的数据——必须确保 .on() 绑定在已成功绑定数据的 元素上。

✅ 正确做法是：将 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、高亮、钻取等交互功能奠定坚实基础。