在D3中使用过渡更新堆积的条形图

Question

使用此处列出的示例： http : //bl.ocks.org/anotherjavadude/2940908在获得一些基础知识的成功之后，我一直在绕D3前进。

我建立了一个堆积图（ Fiddle ）并设法使我的初始过渡工作，添加新数据时出现了问题。

我收到的错误是“未捕获的TypeError：无法读取未定义的属性'length'”

这是它掉落的.data（）：

d3.select('rect.stacks')
    .data(function(d){return d;}) // error occurs here
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand()-50)
    .transition()   
    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })       
    .duration(1000);  

出于任何原因，尝试更新通过的3D数组时，其格式都不正确，我不确定为什么。

我尝试将块提取到函数中，并用尽我的知识去尝试（这将解释所有的怪异现象或意大利面条）。

谢谢！

Answer 1

更新时，由于执行不同的选择，因此您失去了g.valgroup和rect.stacks之间的父级关系。

您可以尝试这样做以保留子选择并保存数据：

d3.selectAll("g.valgroup")
    .data(stacked)
.selectAll('rect.stacks')
    .data(function(d){return d;})  
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand()-50)
    .transition()   
    .attr("y", function(d) { return -y(d.y0) - y(d.y); })
    .attr("height", function(d) { return y(d.y); })       
    .duration(1000); 

-> https://jsfiddle.net/y8ezx2fh/