javascript - d3条形图倒置

Question

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

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

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

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

对此：

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

但是，这看起来像是在绘制图表的倒数 - 在每个条形上方的空间中绘制，并使条形本身（从底部绘制）透明。我究竟做错了什么？

score 14 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

就是这样！

score 1 · Accepted Answer

设置 y 属性似乎有效：

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

3 回答 3