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

Question

我是 D3 和 javascripts 的新手。我正在尝试构建一个动画垂直堆积条形图。我为水平堆积条形图找到了一个示例here。调整后，我得到了一个垂直堆叠的条形图，但是，向下增长。这里是my edited fiddle。

更新：经过多次调整，包括下面建议的调整，这终于奏效了：final working upward growing stacked bar chart 我觉得我需要改变的地方应该在这个代码块中

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 轴向下。

Answer 1

首先你必须改变你的 y-scale 的方向：

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

x 轴也必须进行转换，使其从“高度”开始。在 svg 中，顶部的高度 = 0，因此 svg 的底部等于“高度”：

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

这是更新后的fiddle。

Answer 2

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

首先从您的 y 比例开始：需要以相反的顺序 (height,0) 而不是 (0,height) 映射范围。

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

同样，x 轴需要转换为从“高度”开始。

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