D3.js v3添加transition()后柱状图数据更新失效问题

你的问题出在D3.js v3对过渡和选择集处理的几个细节上，具体问题和修复方案如下：

1. Exit选择集的remove()执行时机错误 #

当前代码里bars.exit().transition().remove()是同步执行的——过渡刚启动，元素就被立刻移除，既看不到动画效果，也导致exit选择集的清理逻辑完全失效。

修复：把remove()放在过渡结束的回调里，确保动画完成后再删除元素：

bars.exit()
    .transition()
    .duration(500)
    .attr("width", 0)
    .attr("y", zeroY)
    .attr("height", 0)
    .style("opacity", 0)
    .each("end", function() {
        d3.select(this).remove(); // 过渡结束后再移除元素
    });

2. Enter选择集未合并到Update选择集 #

D3.js v3中，enter()返回的新元素不会自动合并到原始的bars（update选择集）中。当前代码里新添加的enter元素完全没参与后续的update过渡逻辑，导致新数据的柱状条无法更新到最终状态。

修复：手动将enter选择集合并到update选择集（v3没有merge()方法，需用concat）：

// 先处理enter选择集
var barsEnter = bars.enter()
    .append("rect")
    .attr("class", "data-bar")
    .attr("width", 0)
    .attr("y", zeroYPrev)
    .attr("height", 0)
    .style("cursor", "pointer")
    .on("click", d => {
        onBarClick(d);
    });

// 合并enter和update选择集
bars = barsEnter.concat(bars);

3. 统一处理所有元素的过渡动画 #

合并选择集后，对包含新老元素的bars执行过渡逻辑，确保所有柱状条都能正确更新：

bars
    .transition()
    .duration(500)
    .attr("x", (d, i) => {
        if (i > 0) {
            var start = 0;
            for (let j = 0; j < i; j++) {
                start += data[j].data[0].x * wRatio;
            }
            return start
        } else { return zeroX }
    })
    .attr("y", d => {
        if (d.data[0].y < 0) { return zeroY }
        else { return zeroY - (Math.abs(d.data[0].y) * hRatio) }
    })
    .attr("width", d => (d.data[0].x * wRatio) < .5 ? .5 : (d.data[0].x * wRatio) - .5)
    .attr("height", d => yScale(Math.abs(d.data[0].y) * hRatio))
    .style("fill", d => coloursDict[d.label])
    .style("opacity", 0.5);

完整修复后的代码片段 #

var bars = innerChart.selectAll("rect.data-bar")
            .data(data, d => d.label);

// 处理Exit：过渡结束后移除元素
bars.exit()
    .transition()
    .duration(500)
    .attr("width", 0)
    .attr("y", zeroY)
    .attr("height", 0)
    .style("opacity", 0)
    .each("end", function() {
        d3.select(this).remove();
    });

// 处理Enter并合并到Update选择集
var barsEnter = bars.enter()
    .append("rect")
    .attr("class", "data-bar")
    .attr("width", 0)
    .attr("y", zeroYPrev)
    .attr("height", 0)
    .style("cursor", "pointer")
    .on("click", d => {
        onBarClick(d);
    });

bars = barsEnter.concat(bars);

// 统一执行过渡动画
bars
    .transition()
    .duration(500)
    .attr("x", (d, i) => {
        if (i > 0) {
            var start = 0;
            for (let j = 0; j < i; j++) {
                start += data[j].data[0].x * wRatio;
            }
            return start
        } else { return zeroX }
    })
    .attr("y", d => {
        if (d.data[0].y < 0) { return zeroY }
        else { return zeroY - (Math.abs(d.data[0].y) * hRatio) }
    })
    .attr("width", d => (d.data[0].x * wRatio) < .5 ? .5 : (d.data[0].x * wRatio) - .5)
    .attr("height", d => yScale(Math.abs(d.data[0].y) * hRatio))
    .style("fill", d => coloursDict[d.label])
    .style("opacity", 0.5);

内容的提问来源于stack exchange，提问作者T. Baer