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

SVG从左上角开始，所以＆＃39;身高＆＃39;指定表示页面下方的高度，因此有些内容与您期望的相反。

首先从你的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 + ")");'

Answer 2

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

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

并且必须转换x轴，因此它从＆＃34; height＆＃34;开始。在svg中，top的高度= 0，所以svg的底部等于＆＃34; height＆＃34;：

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堆积条形图向负方向发展

2 个答案: