D3.js柱状图切换年份数据量变化时bar宽度未更新问题求助

问题核心原因 #

你仅在新柱子enter挂载时设置了一次宽度，切换年份后x轴比例尺的带宽x.bandwidth()会随当年数据月份数量变化，但已存在的旧柱子没有同步更新宽度属性，就会出现柱宽不匹配的异常。

修复方案 #

只需修改update函数中柱子渲染的逻辑，把宽度设置移到新旧柱子合并后的公共更新逻辑里即可：

// 原错误逻辑：仅新柱子设置宽度
bar.enter().append("rect")
    .attr("class", "bar")
    .attr("fill", "steelblue")
    .attr("width", x.bandwidth()) // 仅新柱子拿了最新宽度，旧柱子没更新
    .merge(bar)
.transition().duration(speed)
    .attr("x", d => x(d.month))
    .attr("y", d => y(d.value))
    .attr("height", d => y(0) - y(d.value))

修改为：

// 修复后逻辑：所有柱子统一更新宽度
bar.enter().append("rect")
    .attr("class", "bar")
    .attr("fill", "steelblue")
    .merge(bar) // 新旧柱子合并后统一更新所有属性
    .transition().duration(speed)
    .attr("width", x.bandwidth()) // 宽度设置移到此处，所有柱子都同步最新带宽
    .attr("x", d => x(d.month))
    .attr("y", d => y(d.value))
    .attr("height", d => y(0) - y(d.value))

如果想要更顺滑的交互体验，可以给被移除的柱子加消失过渡：

bar.exit()
    .transition().duration(speed)
    .attr("height", 0)
    .attr("y", y(0))
    .remove();

内容的提问来源于stack exchange，提问作者Babas