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

Answer 2

设置y属性似乎有效：

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

jsfiddle here

Answer 3

svg的x和y坐标从左上角开始。你希望y从底部开始。下面的代码假定您将附加到以下行中的某些函数：

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')

要使条形图按您的方式运行，请将y属性设置为从轴上方data[i]处开始：

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

然后，您必须使距离将剩余的data[i]延伸到轴。

.attr('height', function(d) { return d; }) 

那就是它！