Vue-d3-charts结合Axios异步获取数据时出现「Error: too late; already running」错误的问题排查

看起来你遇到的核心问题是vue-d3-charts在图表已经开始渲染/动画运行时，你修改了原有的chart_data数组，导致组件的监听器在处理数据更新时和正在进行的D3动画冲突，抛出了"too late; already running"错误。另外关于buildingdata未定义的问题，你当前代码里的定义是没问题的，应该是之前尝试时的时序问题导致的，我们先解决主要的图表报错问题。

问题原因 #

vue-d3-charts的datum属性监听器在检测到数据变化时，会尝试重新触发图表的绘制逻辑，但如果你用push修改原数组（属于变更操作），组件会认为是对现有数据的增量更新，而此时D3可能正在执行之前的过渡动画，就会出现冲突报错。

解决方案 #

我们可以通过两种方式解决这个问题：

方案1：直接替换整个chart_data数组（推荐）

Vue的响应式系统对数组的替换操作（而非变更操作）处理更清晰，同时vue-d3-charts会将其视为全新的数据源，重新初始化图表，避免和现有动画冲突。修改你的异步请求代码如下：

const sendGetRequest = async () => {
  try {
    let response = await axios.get("path_to_endpoint");
    let buildingdata = response.data;
    console.log(buildingdata)
    // 直接替换数组，而不是push
    this.chart_data = [...buildingdata];
    // 或者直接赋值：this.chart_data = buildingdata; （如果不需要保留原数组引用的话）
  } catch (error) {
    console.log(error);
  }
};

方案2：通过v-if延迟图表渲染

如果希望图表在数据完全加载后再初始化，可以给D3组件添加v-if判断，确保只有当chart_data有数据时才渲染组件：

div
  .card
    .card-body
      <!-- 只有当chart_data有数据时才渲染图表 -->
      <D3BarChart 
        v-if="chart_data.length > 0"
        :config="chart_config" 
        :datum="chart_data" 
        :title="chart_title"
      ></D3BarChart>

这样组件会在数据加载完成后才初始化，避免了空数据初始化后再更新的冲突问题。

额外说明 #

• 你之前遇到的buildingdata未定义问题，大概率是因为之前的代码没有用async/await正确处理异步时序，现在你的代码里已经用了await，所以这个问题应该不会再出现了。
• 如果你确实需要增量更新数据（比如分批加载），可以先停止D3的现有过渡动画，但这个复杂度较高，推荐优先使用上述两种方案。

测试一下这两种方案，应该就能解决你遇到的报错问题了。

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