我是 D3 和 javascripts 的新手。我正在尝试构建一个动画垂直堆积条形图。我在这里找到了一个水平堆叠条形图的示例。调整后,我得到了一个垂直堆叠的条形图,但是,向下增长。这是我编辑的小提琴。
更新:在进行了几次调整之后,包括下面建议的调整,这终于奏效了:最终向上工作的堆叠条形图 我觉得我需要更改的地方应该在这个代码块中
rects = groups.selectAll('.stackedBar')
.data(function(d,i) {console.log("data", d,i); return d; })
.enter()
.append('rect').attr('class','stackedBar')
.attr('y', function(d) { return yScale(d.y0); })
.attr('x', function(d, i) {return xScale(d.x); })
.attr('height',0)
.attr('width', xScale.rangeBand());
console.log(document.querySelectorAll(".stacked"));
var abc=document.querySelectorAll(".stackedBar");
rects
.transition()
.delay(function(d,i,j){console.log("pre",j); return j*500;})
.attr("y", function(d) { return yScale(d.y0); })
.attr("height", function(d) { return yScale(d.y); } )
.duration(1000);
但我四处搜索并试图恢复 yScale 范围,即 y 的初始位置,但它们都不起作用。我还注意到,无论如何,我的 yAxis 总是低于我的 X 轴向下。