D3 Chord布局添加数据后重绘异常求助：新数据叠加未更新视图

嘿，这个问题我太熟悉了！你现在遇到的核心问题有两个：没有清除旧的可视化元素，以及matrix数组没有在重绘前重置，导致每次调用init()都是在旧图表上直接叠加新内容，同时数据计算也会出现重复累加的问题。

问题拆解 #

1. 旧元素未清除：每次调用init()时，你都会通过enter()方法新增<g>、<path>、<text>等元素，但之前绘制的旧元素并没有被移除，所以新图表会直接画在旧图上面。
2. matrix未重置：你的matrix是全局变量，每次init()都会遍历flows往里面添加数据，但旧的matrix内容没有被清空，导致新数据和旧数据混在一起，生成的和弦矩阵完全错误。

修复步骤 #

1. 在init()开头清除SVG内的所有旧元素

在init函数的最开始，添加一行代码清空SVG容器里的所有内容，这样每次重绘都会从头开始：

function init() {
  // 清空SVG内的所有旧元素，避免叠加
  svg.selectAll("*").remove();
  // 重置matrix数组，避免旧数据残留
  matrix = [];
  
  // 剩下的原有逻辑...
  flows.forEach(function (flow) {
    if (!matrix[flow.to]) {
      matrix[flow.to] = [];
    }
    matrix[flow.to][flow.from] = flow.quantity;
  })
  // ...后续的chord、arc、path创建逻辑
}

2. 重置全局matrix数组

每次重绘前必须把matrix重置为空数组，否则新的flows数据会和旧的matrix内容混合，生成错误的和弦布局矩阵。

额外注意事项 #

• 清除svg.selectAll("*")会把所有旧的group、path、text包括隐藏的hiddenArcs都删掉，这是合理的，因为每次init()都会重新生成这些元素。
• 测试的时候点击图表，现在应该会先清除旧图，再基于更新后的dependencies和flows生成全新的和弦图，而不是叠加。

验证修改后的效果 #

修改后，每次点击图表添加新数据时：

• 旧的和弦弧、文字、内部连线都会被清除
• matrix会重新基于最新的flows生成
• 新的和弦图会从零开始绘制，不会再出现叠加问题

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