D3 v3 升级到 v7 后饼图路径不可见问题的完整修复教程-js教程-PHP中文网

D3 v3 升级到 v7 后饼图路径不可见问题的完整修复教程

D3 从 v3 升级至 v7 后，因数据绑定、过渡动画及 DOM 更新机制变更，常见 SVG 路径渲染为空（存在但无图形），核心原因在于 enter() 选择集未与更新集 merge()，且 attrTween 中 this._current 初始化逻辑需适配新版本生命周期。

d3 从 v3 升级至 v7 后，因数据绑定、过渡动画及 dom 更新机制变更，常见 svg 路径渲染为空（`` 存在但无图形），核心原因在于 `enter()` 选择集未与更新集 `merge()`，且 `attrtween` 中 `this._current` 初始化逻辑需适配新版本生命周期。

在 D3 v7 中，selection.enter() 返回的是仅包含新增元素的独立选择集，不会自动包含已存在元素。若直接对 enter() 结果调用 .transition().attrTween("d", ...)，则更新（update）阶段的已有元素将被忽略，导致它们始终使用初始空状态（如 this._current 未定义），最终 arc(interpolate(t)) 返回 null 或无效路径字符串，SVG 渲染失败。

✅ 正确做法是：必须显式调用 .merge(selection)，将 enter 和 update 两个选择集合并为统一操作目标，确保所有元素（新增 + 已存在）都参与过渡动画。

以下是修复后的关键代码段（含完整上下文）：

const width = 350, height = 200, radius = Math.min(width, height) / 2;

// ✅ 重要：显式设置 SVG 尺寸，避免 100% 高度在无父容器约束时塌陷
const svg = d3.select(".donut")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${width / 2}, ${height / 2})`); // ✅ transform 移至 g 元素，非 svg

svg.append("g").attr("class", "slices");

const pie = d3.pie()
  .sort(null)
  .value(d => d.value);

const arc = d3.arc()
  .outerRadius(radius * 0.9)
  .innerRadius(radius * 0.6);

const key = d => d.data.label;
const color = d3.scaleOrdinal()
  .domain(['a', 'b', 'c'])
  .range(["#FF0000", "#FFF000", "#008000"]);

const generate = (data) => {
  const slice = svg.select(".slices")
    .selectAll("path.slice")
    .data(pie(data), key);

  // ✅ 核心修复：enter → append → merge → transition
  slice.enter()
    .append("path") // 推荐用 append 而非 insert（语义更清晰）
    .attr("class", "slice")
    .style("fill", d => color(d.data.label))
    .each(function() { this._current = { startAngle: 0, endAngle: 0, value: 0 }; }) // ✅ 安全初始化 _current
    .merge(slice) // ? 合并 enter 与 update，统一处理
    .transition()
      .duration(1000)
      .attrTween("d", function(d) {
        const interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0); // 记录起始状态
        return t => arc(interpolate(t)); // ✅ 箭头函数更简洁，且确保返回路径字符串
      });

  slice.exit().remove();
};

const donutData = [
  { label: 'a', value: 80 },
  { label: 'b', value: 10 },
  { label: 'c', value: 10 }
];

generate(donutData);

? 关键注意事项：

merge() 不可省略：这是 D3 v4+ 的强制约定，enter() 与 update() 必须显式合并才能统一过渡；
this._current 初始化要健壮：首次渲染时 this._current 为 undefined，建议在 enter() 中用 .each() 显式赋初值（如 {startAngle:0,endAngle:0}），避免 d3.interpolate(undefined, d) 报错或返回异常；
SVG 尺寸需明确：.attr("width", width).attr("height", height) 是必需的，否则 100% 在无约束容器中可能渲染为 0×0；
transform 应作用于 ：而非，否则会干扰坐标系基准；
CSS 补充建议：为防路径意外透明，可添加 path.slice { opacity: 1; }。