在使用 D3.js 动态更新饼图数据时，若未显式清除上一轮生成的标注（如连线 polyline 和标签 text），会导致新旧标注叠加、视觉混乱；正确做法是在每次 update() 执行前，通过 selectAll().remove() 清理对应元素。
在使用 d3.js 动态更新饼图数据时，若未显式清除上一轮生成的标注（如连线 polyline 和标签 text），会导致新旧标注叠加、视觉混乱；正确做法是在每次 `update()` 执行前，通过 `selectall().remove()` 清理对应元素。
D3.js 的数据驱动更新机制（Enter-Update-Exit）对主图表元素（如
✅ 正确解法：在每次重绘前，主动清空所有相关标注元素，而非依赖 Enter-Update-Exit：
function update(data) {
// ✅ 第一步：清除所有已有标注（关键！）
svg.selectAll("polyline").remove(); // 删除所有连线
svg.selectAll("text").remove(); // 删除所有文本标签
// 后续保持原有逻辑不变...
var pie = d3.pie()
.value(d => d.value)
.sort((a, b) => 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);
// 更新扇形（你已正确实现）
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();
// ✅ 第二步：重新绑定并渲染标注（无需 exit，因已全局清除）
svg.selectAll("polyline")
.data(data_ready)
.enter().append("polyline")
.attr("stroke", "black")
.style("fill", "none")
.attr("stroke-width", 1)
.attr("points", d => {
const posA = arc.centroid(d);
const posB = outerArc.centroid(d);
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
const posC = [radius * 0.95 * (midangle d.data.key)
.attr("transform", d => {
const pos = outerArc.centroid(d);
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
pos[0] = radius * 0.99 * (midangle {
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
return midangle <p>⚠️ 注意事项：</p>
-
避免误删 SVG 内其他元素：当前写法 svg.selectAll("polyline") 会删除该
下所有 polyline（含可能的辅助线）。若项目后期需保留某些固定图形，建议为标注元素添加统一 class（如 .annotation-line, .annotation-label），再按类选择：svg.selectAll(".annotation-line").remove()。 - 性能考量：对于高频更新场景（如实时流数据），可改用 selection.exit().remove() 模式管理标注，但需确保每次 selectAll() 绑定的是同一 selection 变量（例如 const labels = svg.selectAll(".label")），本例因结构简单，全局清除更直观可靠。
- 兼容性提示：示例基于 D3 v4（如题中引入 d3.v4.js），若升级至 D3 v6+，d3.entries() 返回数组格式不变，但需确认 d3.scaleOrdinal().domain() 等 API 兼容性，核心清理逻辑完全一致。
通过这两行 remove() 调用，即可彻底解决切换数据时标注层叠问题，让可视化始终保持清晰、专业与可维护。
