Dynamic D3.js堆叠条形图断开过渡

我正在尝试以与此条形图相同的方式将堆叠条形图转换为- 我一直在遵循Mike Bostock的“条形图，第2部分”示例，在转换堆叠的条形图时一切都正常。
我的坏例子在这里- 我确信问题在于如何设置数据，如下所示。我甚至想知道是否需要将数据转换为列而不是层？ 非常感谢：）谢谢

从重画（）：

---

在这个问题中，转换显然是最棘手的部分，因此我更喜欢从您提供的图表中，使用Mike Bostock的示例来查看图表

您提供的堆叠实现的主要问题是信息是“反向的”，因为您希望每个条都位于数据数组的不同元素中，这样您就可以通过其时间戳来识别数据

首先，让我们用每个元素的值数组定义一些数据：

function next () {
    return {
        time: ++t,
        value: d3.range(3).map(getRand)
    };
}

然后，在

redraw（）函数中：


首先格式化条形图堆栈的数据：

customData = data.map(function(d){
    y0=0
    return {value:d.value.map(function(d){return {y0:y0, y1: y0+=d}}), time:d.time}
})


然后为每一堆钢筋创建组

var state = graph.selectAll(".g")
    .data(customData, function(d) { return d.time; });
var stateEnter = state.enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(d.time+1) + ",0)"; });


然后，添加组中的钢筋堆栈：

stateEnter.selectAll("rect")
    .data(function(d) { return d.value; })
    .enter().append("rect")
    .attr("width", barWidth)
    .attr("y", function(d) {return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .attr("class", "bar")
    .style("fill", function(d,i) { return color(i); });


移动每个条形图组以更新x值：

state.transition().duration(1000)
    .attr("transform", function(d) {console.log(d); return "translate(" + x(d.time) + ",0)"; });


删除旧值

state.exit()
    .attr("transform", function(d) {return "translate(" + x(d.time) + ",0)";})
    .remove()




PS：下一次，请提供jsFiddles，这样我们就不必去查看您页面的源代码来提供解决方案。此外，尽量减少示例的代码（删除axis、无用的解析等），以便我们能够集中精力解决问题。此外，在这个过程中，当你孤立问题时，你常常会自己发现问题
 谢谢。你的回答很好地描述了事情：）
state.exit()
    .attr("transform", function(d) {return "translate(" + x(d.time) + ",0)";})
    .remove()