在 D3.js 饼图中动态切换数据集时，若未显式清除已存在的标注（如 polylines 和 labels），会导致新旧标注叠加、视觉混乱；需在每次 update() 执行前主动移除对应 SVG 元素。
在 d3.js 饼图中动态切换数据集时，若未显式清除已存在的标注（如 polylines 和 labels），会导致新旧标注叠加、视觉混乱；需在每次 `update()` 执行前主动移除对应 svg 元素。
D3.js 的更新模式（Enter-Update-Exit）能自动处理绑定数据的图形元素（如
✅ 正确做法：在 update() 开头添加针对性清理
将以下两行代码插入 update(data) 函数的最顶部（即数据处理和绘图逻辑之前）：
// 清除上一轮生成的所有 polylines 和 text 标注（避免残留）
svg.selectAll("polyline").remove();
svg.selectAll("text").remove();
⚠️ 注意：不要使用 svg.selectAll("*").remove() —— 这会误删饼图
、坐标系 等核心结构，破坏图表完整性。
? 优化建议：提升健壮性与可维护性
为避免全局 text/polyline 误删（例如页面其他区域也含这些标签），推荐为标注元素添加语义化 class 名称，并在选择器中精确限定：
// 更新后的 update() 函数片段（关键修改已高亮）
function update(data) {
// ✅ 安全清理：仅移除属于本图表的标注
svg.selectAll(".annotation-polyline").remove();
svg.selectAll(".annotation-label").remove();
// ... 后续数据准备与 pie 计算 ...
// 绘制连线（添加 class）
svg.selectAll(".annotation-polyline")
.data(data_ready)
.enter()
.append('polyline')
.attr("class", "annotation-polyline") // ← 关键：赋予 class
.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 <h3>? 总结要点</h3>
-
根本原因：
和 标注未参与 D3 的数据绑定生命周期，.exit() 对其无效； - 最小修复：svg.selectAll("polyline").remove() + svg.selectAll("text").remove()（适用于简单场景）；
- 生产推荐：使用 class 选择器精准控制，避免副作用；
- 额外提醒：确保 svg 变量作用域正确（本例中为全局定义，故可安全调用）；
- 延伸思考：对复杂图表，可封装 clearAnnotations() 方法，并在 update() 中调用，提升代码可读性与复用性。
通过上述调整，切换任意数据集（如 data1 → data6）后，饼图将始终只显示当前数据对应的清晰标注，彻底解决重叠与残留问题。
