javascript - d3条形图是颠倒的

Question

我有一个用 d3 绘制的简单条形图，带有垂直条:http://jsfiddle.net/philgyford/LjxaV/2/

但是，它会向下绘制条形图，基线位于图表顶部。

我读过要反转它，从底部向上绘制，我应该更改 y 轴上的 range()。所以，改变这个:

    .range([0, chart.style('height')]);

为此:

    .range([chart.style('height'), 0]);

但是，这看起来像是在绘制图表的反面 - 在每个条形图上方的空间中绘制，并使条形图本身(从底部绘制)保持透明。我做错了什么？

Answer 1

根据 d3 基本条形图: http://bl.ocks.org/mbostock/3885304

您在反转范围方面是正确的。

此外，您的矩形应该像这样添加:

    .attr('y', function(d) { return y(d.percent); } )
    .attr('height', function(d,i){ return height - y(d.percent); });