D3 从 v3 升级到 v7 后，因数据绑定与 DOM 更新机制变化（如缺失 .merge()、transform 设置时机错误、SVG 尺寸未显式声明），导致环形图路径渲染为空——本文提供完整可运行的修复方案与关键原理说明。
d3 从 v3 升级到 v7 后，因数据绑定与 dom 更新机制变化（如缺失 `.merge()`、`transform` 设置时机错误、svg 尺寸未显式声明），导致环形图路径渲染为空——本文提供完整可运行的修复方案与关键原理说明。
在将 D3 v3 的环形图代码迁移到 v7（或 v6+）时，最常被忽略却最关键的问题是 数据更新模式的范式转变：D3 v4+ 彻底废弃了隐式合并（implicit merge），要求开发者显式调用 .merge() 来统一 enter、update 和 exit 三类选择集的操作。你遇到的 <path class="slice" style="fill: rgb(0, 128, 0);"></path> 空路径现象，根本原因正是 slice.enter() 创建的新元素未与 update 集合合并，导致后续 .attrTween("d", ...) 仅作用于已有元素（而初始渲染时无旧元素），新进入的 <path></path> 始终缺少 d 属性——因此不可见。
以下是修复后的核心逻辑与关键改进点：
✅ 正确的数据绑定与过渡链
const slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", d => color(d.data.label))
.attr("class", "slice")
// ? 必须 merge！否则 enter 元素无法参与 attrTween
.merge(slice)
.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || d; // 初始化 _current（首次渲染时用原始数据）
const interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0); // 保存插值起点
return t => arc(interpolate(t));
});
slice.exit().remove();⚠️ 注意：
.merge(slice)必须紧跟在 enter 操作之后、任何 update 操作之前；否则 transition 不会应用到新插入的元素。
✅ SVG 容器初始化修正
v3 中常将 transform 直接设在顶层 <g></g> 上，但 v7+ 需确保：
- SVG 元素显式设置
width/height（避免百分比尺寸在无父容器约束时失效）； -
transform应施加在包含图表内容的<g></g>上，而非追加后才设置（否则坐标系错位）。
✅ 推荐初始化写法：
const svg = d3.select(".donut")
.append("svg")
.attr("width", width) // ← 关键：显式宽高
.attr("height", height) // ← 避免 0×0 渲染区域
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`); // ← 立即设置中心变换✅ 完整可运行示例（D3 v7+）
<div class="donut"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script>
const width = 350, height = 200, radius = Math.min(width, height) / 2;
const svg = d3.select(".donut")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
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 color = d3.scaleOrdinal(['a','b','c']).range(["#FF0000", "#FFF000", "#008000"]);
const key = d => d.data.label;
const generate = (data) => {
const slice = svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", d => color(d.data.label))
.attr("class", "slice")
.merge(slice) // ← 核心修复点
.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || d;
const interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return t => arc(interpolate(t));
});
slice.exit().remove();
};
generate([
{ label: 'a', value: 80 },
{ label: 'b', value: 10 },
{ label: 'c', value: 10 }
]);
</script>? 补充建议
-
避免全局
_current污染：this._current是常见技巧，但生产环境建议使用d3.local()或闭包变量管理状态； -
响应式增强：如需适配不同屏幕，可用
getBoundingClientRect()动态计算radius，并监听resize事件重绘； -
替代方案？ 若项目轻量且无需复杂交互，Chart.js 或纯 CSS
conic-gradient可快速实现静态环形图，但动态过渡与数据驱动更新仍以 D3 v7 最可靠。
迁移不是简单替换 API，而是理解 D3 “数据驱动文档” 范式的演进。掌握 .merge()、显式尺寸、状态隔离这三点，90% 的 v3→v7 可视化升级问题迎刃而解。
