D3.js更新数据后图表不刷新怎么办？

Des.一苗提问于 2026-03-05 19:52:23 阅读 54

组件

我用D3.js画了个柱状图，第一次渲染没问题，但数据变了之后调用更新函数，柱子却没变，还是原来的数据。是不是哪里漏了？

我试过重新绑定数据，也用了enter().append()和exit().remove()，但就是不生效。控制台打印的新数据是对的，可图表就是不动。

function updateChart(data) {
  const bars = svg.selectAll('rect')
    .data(data);
  
  bars.enter().append('rect')
    .attr('width', x.bandwidth())
    .attr('height', d => height - y(d.value))
    .attr('y', d => y(d.value));
  
  // 没有写 update 部分？
}

我来解答赞 9 收藏

反馈

2 条解答

爱学习的纪娜 Lv1

看到你的问题了，你只写了 enter 部分，根本没处理 update 阶段！

D3的数据绑定有 enter、update、exit 三个阶段，你光处理了新增的数据，现有的柱子当然不会动。

正确写法是这样的：

function updateChart(data) {

  const bars = svg.selectAll('rect')

    .data(data);

  

  // 处理新增的数据

  bars.enter().append('rect')

    .attr('width', x.bandwidth())

    .attr('fill', 'steelblue')

    .merge(bars)  // 关键！合并 enter 和 update

    .attr('x', d => x(d.name))

    .attr('y', d => y(d.value))

    .attr('height', d => height - y(d.value));

  

  // 处理需要删除的元素

  bars.exit().remove();

}

或者分开写也行：

// enter - 新增

bars.enter().append('rect')

  .attr('width', x.bandwidth())

  .attr('fill', 'steelblue')

  .attr('x', d => x(d.name))

  .attr('y', d => y(d.value))

  .attr('height', d => height - y(d.value));



// update - 更新

bars

  .attr('y', d => y(d.value))

  .attr('height', d => height - y(d.value));



// exit - 删除

bars.exit().remove();

重点就是 merge(bars) 或者单独写一个 update 块，把现有数据的属性重新设置一遍，这样图表才会跟着数据动起来。

2026-03-19 11:25

东方翌耀 Lv1

你漏了update部分啊兄弟，我一般直接这样写：

function updateChart(data) {

  const bars = svg.selectAll('rect').data(data);

  

  bars.enter().append('rect')

    .attr('width', x.bandwidth())

    .attr('height', d => height - y(d.value))

    .attr('y', d => y(d.value))

    .merge(bars)

    .attr('height', d => height - y(d.value))

    .attr('y', d => y(d.value));

  

  bars.exit().remove();

}

关键是要用merge把新老元素合并一起更新，不然老柱子不会动。

2026-03-05 20:11