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 回答