在使用 D3.js 动态更新饼图数据时，若未显式移除旧的标注元素（如 polylines 和 text 标签），会导致新旧标注叠加、视觉混乱；正确做法是在每次 update() 执行前，通过 selectAll().remove() 清空对应类型的 DOM 元素。
在使用 d3.js 动态更新饼图数据时，若未显式移除旧的标注元素（如 polylines 和 text 标签），会导致新旧标注叠加、视觉混乱；正确做法是在每次 `update()` 执行前，通过 `selectall().remove()` 清空对应类型的 dom 元素。
要实现饼图数据切换时干净、无残留地更新所有标注（包括连接线和标签），关键在于理解 D3 的“进入-更新-退出”（Enter-Update-Exit）模式仅自动管理绑定到同一选择器（selection） 的元素。而原代码中，polyline 和 text 元素是通过独立的 selectAll('allPolylines') 和 selectAll('allLabels') 创建的，但它们未复用已有选择器，也未执行 exit() 操作——导致每次调用 update() 都新增元素，旧元素却滞留 DOM 中。
✅ 正确解法：在生成新标注前，主动清空历史标注：
function update(data) {
// ✅ 第一步：清除所有旧标注（关键！）
svg.selectAll("polyline").remove();
svg.selectAll("text").remove();
// 后续逻辑保持不变：计算 data_ready、绘制弧形...
var pie = d3.pie()
.value(function(d) { return d.value; })
.sort(function(a, b) { return d3.ascending(a.key, b.key); });
var data_ready = pie(d3.entries(data));
var arc = d3.arc()
.innerRadius(radius * 0.5)
.outerRadius(radius * 0.8);
var outerArc = d3.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
// ✅ 更新饼图弧形（已含 enter/update/exit 逻辑）
var u = svg.selectAll("path")
.data(data_ready);
u.enter().append("path")
.merge(u)
.transition().duration(1000)
.attr("d", d3.arc().innerRadius(0).outerRadius(radius))
.attr("fill", d => color(d.data.key))
.attr("stroke", "white")
.style("stroke-width", "2px");
u.exit().remove();
// ✅ 重新绘制连接线（polyline）
svg.selectAll("polyline")
.data(data_ready)
.enter().append("polyline")
.attr("stroke", "black")
.style("fill", "none")
.attr("stroke-width", 1)
.attr("points", function(d) {
var posA = arc.centroid(d);
var posB = outerArc.centroid(d);
var posC = outerArc.centroid(d);
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
posC[0] = radius * 0.95 * (midangle d.data.key)
.attr("transform", function(d) {
var pos = outerArc.centroid(d);
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
pos[0] = radius * 0.99 * (midangle {
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
return midangle <p>⚠️ 注意事项：</p>
- 不要依赖 selectAll('allPolylines') 的 exit 机制：该选择器名 'allPolylines' 是自定义类名（非真实 CSS 类），D3 不会自动识别其关联性；且原代码未对它调用 .exit().remove()。
- 更健壮的替代方案：为标注元素添加统一 class，例如 .attr('class', 'annotation-polyline')，再通过 svg.selectAll('.annotation-polyline').remove() 精准清理，避免误删其他文本（如标题）。
- 性能提示：对于高频更新场景，可考虑 selectAll().data().exit().remove() 替代全量 remove()，但本例中简单清空更直观可靠。
- D3 v4/v5/v6 兼容性：上述写法适用于 D3 v4+；若升级至 v6+，注意 d3.schemeDark2 已移至 d3.scaleOrdinal(d3.quantize(d3.interpolateDark2, n))，需同步调整配色逻辑。
通过在 update() 开头强制清除 polyline 和 text，即可确保每次数据切换后图表整洁、标注唯一，完美解决动态可视化中的 DOM 残留问题。
