1

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

4

2 回答 2

1

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

首先从您的 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 + ")");'
于 2017-09-21T00:50:56.110 回答
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);

这是一个更新的小提琴

于 2017-09-21T18:27:29.323 回答