Vue3中更新现有D3图形无需新建实例及避免重复生成g元素的问题咨询

问题根因 #

你当前代码的核心问题是join('g')之后的链式调用会同时作用于新增和已存在的g元素，每次数据更新触发重绘时，已有的g都会被再次插入一个rect元素，你观察到的重复元素本质是单个g下堆积了多个rect，而非g被重复创建。

解决方案 #

方案1：使用D3 join的分阶段逻辑（推荐，性能更好） #

利用join的三个参数分别处理新增、更新、删除三个状态，仅在新增g时插入rect，已存在的g仅更新属性即可：

// 仅替换子组件setup内的watchEffect代码即可
watchEffect(() => {
  const selectSvg = d3.select(svgRef.value);

  selectSvg
    .selectAll("g")
    .data(Object.values(props.data))
    .join(
      // 处理新增的g元素
      enter => {
        const gEl = enter.append("g")
          .attr("transform", (d, i) => `translate(60, ${i * 21})`);
        // 仅新增的g才插入rect
        gEl.append("rect")
          .attr("width", "20px")
          .attr("height", "20px")
          .attr("fill", d3.color("orange"));
        return gEl;
      },
      // 处理已存在的g元素，仅更新位置属性
      update => update.attr("transform", (d, i) => `translate(60, ${i * 21})`),
      // 处理数据减少时多余的g元素，直接移除
      exit => exit.remove()
    )
})

方案2：清空重绘（适合小数据量场景，写法简单） #

如果你不想区分状态，直接每次重绘前清空svg内所有现有内容即可：

watchEffect(() => {
  const selectSvg = d3.select(svgRef.value);
  // 清空所有现有内容
  selectSvg.selectAll("*").remove();

  selectSvg
    .selectAll("g")
    .data(Object.values(props.data))
    .join("g")
    .attr("transform", (d, i) => `translate(60, ${i * 21})`)
    .append("rect")
    .attr("width", "20px")
    .attr("height", "20px")
    .attr("fill", d3.color("orange"));
});

补充优化建议 #

如果后续你的数据是带唯一标识的对象，建议给data方法传入第二个参数指定匹配键，比如.data(Object.values(props.data), d => d.id)，D3会根据键值精准匹配对应元素，避免不必要的销毁重建，进一步提升渲染性能。

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