时间戳

首页 > 解决方案 > D3 的数据更新未按预期运行

javascript - D3 的数据更新未按预期运行

问题描述

调用我的 rects.enter().append() 后，我的 rects.attr() 没有为新附加的值设置值。

let rects = svg.selectAll('rect')
    .data(data)

//On update Only
rects.attr('fill', 'black')

//On enter ...
rects.enter()
    .append('rect')
    .style('fill', 'maroon')

//On update AND enter
rects
    .attr('x', (d, i)=>i*(barWidth+padding))
    .attr('y', d=>height - bar_height(d.value))
    .attr('width', barWidth)
    .attr('height', d=> bar_height(d['value']))

基本上，我的理解在评论中。如果我没有调用 enter()，它只会将更改应用于数据中以前的值。这只是应该让条具有不同的颜色。然后我 enter() 并将颜色更改为添加的新颜色，最后，我希望现在所有的都在 rects 中，可以这么说，它应该更新所有它们的属性。

问题是最终的属性只被设置为那些没有附加的值，所以第一次没有绘制任何东西，然后第二次将它作为更新绘制。

我尝试在此基础上进行更改，这就是我所在的位置。

标签： javascriptd3.js

解决方案

无需您的其余代码即可确保其正常工作。您应该使用.merge()。对于 v3，方法不同，这是针对 v4+ 的。

let rects = svg.selectAll('rect')
    .data(data)

//On update Only
rects.attr('fill', 'black')

//On enter ...
rects.enter()
    .append('rect')
    .style('fill', 'maroon')
    .merge(rects)
    .attr('x', (d, i)=>i*(barWidth+padding))
    .attr('y', d=>height - bar_height(d.value))
    .attr('width', barWidth)
    .attr('height', d=> bar_height(d['value']))

这会将新添加的内容合并到现有矩形的选择中，并将使用语句rects之后的所有内容更新它们。merge

推荐阅读