在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/