Javascript D3堆栈布局问题

我在向堆栈图动态添加数据时遇到问题。看看这些例子

工作：

堆栈图用数据初始化，2个堆栈

不工作：

按下按钮以附加层

我尝试在图形初始化后将数据附加到图形中。第一个堆栈附加良好的。然而，第二个堆栈变得疯狂。第二层的y0值看起来很好。看起来第二层正在向下推动x轴

我很确定这是因为我做的数据连接错误，但我不知道为什么

下面是非工作fiddle的数据连接代码

var updateData = d3.select(".parts-comparison-graph").selectAll("path")
                  .data(stack(layers));
                console.log(updateData);
                updateData.transition()
                  .duration(2500)
                  .attr("d", function(d){return area(d.values)})
                  .each("end",function(){svg.attr('pointer-events', 'auto')});
                updateData.style("fill", function(d) { return d.color; });

---

您缺少该循环，因为它将生成与测试数据长度相同的路径

在你的情况下，你只是做了一个单一的路径

var currentYear = parseInt(new Date().getFullYear());
            var zeroLayer = [];
            for (var j =0; j < test.length; j++){
               var zeroSegment = {};
              zeroSegment.values = [];
              for(var i=2000;i<=currentYear;i++){
                  zeroSegment.values.push({"x":new Date(i,0,1),"y":0,"y0":0});
              }
              zeroLayer.push(zeroSegment);//only one path gets inserted
            }

var currentYear=parseInt（新日期（）.getFullYear（））；
var zeroLayer=[]；
对于（var j=0；j对于（var i=2000；iOne问题，如果您不知道测试数据的长度怎么办？用户可以选择只添加3层或7层，而我事先不会知道。在任何时候，当您知道需要新层时，您都需要添加一个路径，就像您在这里做的一样svg.selectAll（“path”）.data（stack（zeroLayer））.enter（）.append（“path”）.attr（“d”，函数（d）{返回区域（d.values）}）；
for (var j =0; j < test.length; j++){
               var zeroSegment = {};
              zeroSegment.values = [];
              for(var i=2000;i<=currentYear;i++){
                  zeroSegment.values.push({"x":new Date(i,0,1),"y":0,"y0":0});
              }
              zeroLayer.push(zeroSegment);//test data has 6 data so 6 zeroLayers be created
            }