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

Question

我是 D3 和 javascripts 的新手。我正在尝试构建一个动画垂直堆叠条形图。我找到了一个例子 here for a horizontal stacked bar chart. After tweaking it, I got a vertical stacked bar chart, however, growing downwards. Here is 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 的初始位置，并且 none 它们起作用了。我还注意到，无论如何，我的 yAxis 始终低于我的 X 轴向下。

Answer 1

SVG 从左上角开始，所以指定的 'height' 表示页面下方的高度，所以有些事情与您预期的相反。

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

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

同样，x 轴需要转换为从 'height' 开始。

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

Answer 2

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

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

并且 x 轴也必须进行变换，因此它从 "height" 开始。在 svg 顶部有 height=0 所以你的 svg 的底部等于 "height":

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。

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

D3.js stacked bar chart growing to negative direction

javascript

d3.js

stacked-chart

stackedbarseries