D3堆栈布局问题

D3 stack layout issues

本文关键字：问题 堆栈布局 D3      更新时间：2023-09-26

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

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

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

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

按下按钮可附加图层。

我试图在图形初始化后将数据附加到图形中。第一个堆栈附加精细。然而，第二个堆栈变得疯狂。第二层的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
            }

在校正后的代码中，测试数据有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
            }

此处为工作代码

希望这能有所帮助！

相关文章：