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

慕容姝贝提问于 2026-03-05 16:35:19 阅读 3

交互

我用 D3.js 画了一个柱状图，初始数据能正常显示，但当我用新数据调用更新函数时，柱子的高度没变。我已经用了 selectAll().data().enter().append() 这套流程，是不是漏了 update 部分？

这是我的更新代码：

function updateChart(newData) {
  const bars = svg.selectAll('rect')
    .data(newData);

  bars.enter()
    .append('rect')
    .attr('width', 20)
    .attr('height', d => yScale(d.value))
    .attr('y', d => yScale(0));

  bars.exit().remove();
}

我来解答赞 5 收藏

反馈

1 条解答

运来 Lv1

啊哈！这个问题我遇到过，确实是漏了update部分。你的代码只处理了enter和exit，但没处理已经存在的元素更新。D3的数据绑定有三个状态：enter（新增）、update（更新）、exit（移除），你缺了最关键的update部分。

可以试试这样改：

function updateChart(newData) {

  const bars = svg.selectAll('rect')

    .data(newData);



  // 处理新增

  bars.enter()

    .append('rect')

    .attr('width', 20)

    .merge(bars)  // 这里合并enter和update

    .attr('height', d => yScale(d.value))

    .attr('y', d => yScale(0));



  // 处理移除

  bars.exit().remove();

}

关键点是用了.merge()把enter和update合并处理，这样新老柱子都会更新高度。我之前也经常忘记这步，debug的时候才发现柱子像冻住了一样不动，特别抓狂哈哈！

另外建议把width之类的固定属性放在enter里，只把需要动态更新的属性放在merge后面，性能会更好些。

2026-03-05 16:47