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

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

组件

我用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 部分？
}

我来解答赞 0 收藏

反馈

1 条解答

东方翌耀 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