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

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

交互

我用 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();
}

我来解答赞 8 收藏

反馈

2 条解答

ლ爱红 Lv1

你这代码确实漏了update部分。D3的数据绑定有3个状态：enter（新增）、update（更新）、exit（删除），你现在只处理了enter和exit。

通用做法是要把更新逻辑写到merge之后。修改后的代码应该这样：

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了半天才发现没merge...

2026-03-07 09:11

运来 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