d3条形图是颠倒的

Question

我在d3中绘制了一个简单的条形图,带有竖条:http://jsfiddle.net/philgyford/LjxaV/2/

然而,它正在绘制条形图,基线位于图表的顶部.

我已经读过要反转它,从底部绘制,我应该改变range()y轴.所以,改变这个:

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