D3.js将条形图堆叠到负方向

Question

我是D3和JavaScript的新手。我正在尝试构建动画垂直堆叠的条形图。我在这里找到了一个水平堆叠条图表的示例。经过调整后，我得到了一个垂直堆叠的条形图，但是，向下增长。这是我编辑的小提琴。

更新：在进行了几次调整之后，包括下面建议的调整后，这最终有效：最终加入堆叠的条形图我觉得我需要更改的地方应该在此代码块

中

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级的方向：

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

这是一个更新的小提琴。

Answer 2

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

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

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 + ")");'