D3堆栈布局问题

Question

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

工作：https://jsfiddle.net/dL5t9c0n/8/

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

不工作：https://jsfiddle.net/fsne8jrL/6/

按下按钮以附加图层。

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

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

这是不工作的小提琴的数据连接代码。

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; });

Answer 1

您缺少了这个for循环，这将生成与测试数据长度一样多的路径。

在你的情况下，你只是在走一条路.

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
            }

在修正后的代码中，测试数据有6个数据，因此创建了6个zeroLayers。

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
            }

工作代码这里

希望这能有所帮助！