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在这里

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

就是这样！