D3 Donut Chart 数据绑定与 Tooltip 正确实现指南

本文详解如何在 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）：

Outwrite

AI写作浏览器插件，将您的想法变成有力的句子

下载

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、高亮、动态标签等交互功能奠定坚实基础。