D3力导向图切换连线类型后旧线条残留 如何实现正确重绘

• 连线选择器与实际class不匹配：你调用svg.selectAll(".link")选择连线，但给line元素设置的class只有uses/needs，没有公共的link类，导致每次绑定数据都匹配不到已有元素，直接新增新的line元素，旧元素就残留在画布上。
• 全量删除+重初始化逻辑冗余：双击后删除所有line再调用initialize()的做法不符合D3数据驱动的设计逻辑，还会重复绑定事件、重置力导向图状态，容易引发线条消失的异常。

1. 统一连线公共类 #

修改连线class赋值逻辑，给所有连线添加公共link类，保证选择器能正确匹配到已有元素：

link = svg.selectAll(".link")
  .data(graph.links)
  .join("line")
  .attr("class", d => `link ${d.type}`) // 同时添加公共类和类型类

2. 简化双击更新逻辑 #

不需要删除元素和重初始化，修改数据后直接更新当前连线的class即可，力导向图的tick回调会自动处理位置更新：

.on("dblclick", function (event, d) {
  // 切换类型
  d.type = d.type === "uses" ? "needs" : "uses"
  // 直接更新当前元素的class，不需要全量重绘
  d3.select(this).attr("class", `link ${d.type}`)
  // 给力导向图一个小的alpha值触发重绘即可
  force.alpha(0.3).restart()
})

3. 移除冗余逻辑 #

删掉双击事件里的svg.selectAll("line").remove()和initialize()调用，initialize()只需要页面加载时调用一次即可。

内容的提问来源于stack exchange，提问作者ICoded