Javascript D3.js堆叠条形图向负方向增长

我不熟悉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轴向下移动

SVG从左上角开始，因此指定的“height”表示页面下方的高度，因此有些事情与预期相反

首先从y比例开始：需要以相反的顺序（高度，0）而不是（0，高度）映射范围

同样，x轴需要变换，以从“高度”开始

        svg.append('g')
        .attr('class', 'axis')
        .call(xAxis)
        .attr("transform", "translate(0," + height + ")");'

---

首先，必须更改y刻度的方向：

yScale = d3.scale.linear().domain([0,yMax]).range([height,0])

x轴也必须变换，以便从“高度”开始。在svg中，顶部的高度为0，因此svg的底部等于“高度”：

最后但并非最不重要的一点是，您必须更改堆叠条形图的建筑方向，如：

rects
   .transition()
   .delay(function(d,i,j){console.log("pre",j); return j*500;})
   .attr("y", function(d) { return yScale(d.y + d.y0); })
   .attr("height", function (d) { return yScale(d.y0) - yScale(d.y + d.y0); } )
   .duration(1000);

---

这是一个更新的。当数据从0开始，轴位于顶部时，条形图从顶部开始增长。你想从下往上（从1200+开始）增长条，还是改变整个方向，让x轴也在底部？我想让x轴在底部，然后条一个接一个地向上增长，就像原来的示例所示，但在垂直方向。好的，我在下面添加了一个答案。我根据您的建议进行了更改。x轴现在位于底部，y轴现在位于x轴上方，这是一个很大的进步。但是，实际的刻度仍然是相反的顺序：1200在底部，0在顶部。只是做了一些更改，包括更改“y”和“height”的最终值。现在，这正是我想要的。工作小提琴在这里：是的！你的答案和我自己花了4个小时才弄明白的变化完全一样。。。我希望我能早点看到这个。谢谢，我想在四个小时的阅读别人的例子和尝试各种方法的过程中，我还是学到了很多。干得好！我认为当你试图提出一个好问题并与其他人讨论时，这是一个很好的学习方法。

svg.append('g')
   .attr('class', 'axis')
   .call(xAxis)
   .attr("transform", "translate(0," + height + ")");

rects
   .transition()
   .delay(function(d,i,j){console.log("pre",j); return j*500;})
   .attr("y", function(d) { return yScale(d.y + d.y0); })
   .attr("height", function (d) { return yScale(d.y0) - yScale(d.y + d.y0); } )
   .duration(1000);