本文详解如何在 d3 v3 中为环形图（donut chart）正确绑定数据，解决 `d.data` 为 `undefined` 的常见问题，并实现可靠的 tooltip 交互逻辑。

在使用 D3 v3 构建环形图时，一个高频陷阱是事件回调中无法访问原始数据——例如 onMouseEnter(d) => console.log(d.data) 输出 undefined。根本原因在于：事件监听器被绑定在父容器（如 ）上，而非实际承载数据的 元素。D3 的 .data() 绑定作用于选中的 DOM 节点集合，而 gElement.on("mouseenter", ...) 中的 d 指向的是 的绑定数据（此处为空），并非 的饼图扇形数据。

✅ 正确做法是：将事件监听器直接绑定到已绑定数据的 元素上。这需要在调用 .data().enter().append("path") 后，保存该选择集（selection）并复用它，而非重复调用 gElement.selectAll("path")（后者返回的是无数据的新选择集）。

以下为修复后的核心逻辑（基于 D3 v3.5.17）：

应用程序在线商店宣传网站模板

应用程序在线商店宣传网站模板是一款提供免费应用程序在线商店宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

function updateChart(data) {
  // 生成饼图布局数据
  const pieData = d3.layout.pie()
    .startAngle(-(Math.PI / 2) * 5)
    .value(d => d[1])
    .sort(null)
    .padAngle(padAngle)(data);

  // 更新已有路径：过渡动画
  gElement.selectAll("path")
    .transition()
    .duration(transitionDuration)
    .attrTween("d", arcTween);

  // 关键：获取并保存新创建的 path 选择集
  const paths = gElement.selectAll("path")
    .data(pieData)
    .enter()
    .append("path");

  // 对 paths 集合统一设置属性和事件
  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);
}

function onMouseEnter(d) {
  console.log("Data:", d.data);        // → ["high", 3], ["middle", 4], etc.
  console.log("Value:", d.value);      // → 3, 4, 2
  console.log("Index:", d.index);      // → 0, 1, 2
}

⚠️ 注意事项：

• 避免滥用 event.explicitOriginalTarget.__data__：虽然可临时取数，但属非标准、不可靠且破坏封装的 hack 方式，生产环境严禁使用。
• .each() 中的 this._current = d 是平滑过渡的关键：它为每个 缓存当前数据状态，供 arcTween 函数插值使用。
• d.data 结构说明：d3.layout.pie() 输出的每个 d 对象包含 data（原始输入项，如 ["high", 3]）、value（数值）、startAngle/endAngle 等字段，d.data[0] 即类别名，d.data[1] 即对应值。
• D3 版本适配：本文示例基于 D3 v3；若升级至 D4+，需改用 d3.pie()、d3.arc() 及 selection.join()，API 差异较大，不可直接迁移。

通过将事件监听器精准绑定到数据驱动的 元素，并确保 data() 调用与事件注册处于同一选择集上下文，即可彻底解决 d.data 丢失问题，为 tooltip、高亮、动态标签等交互功能奠定坚实基础。