d3条形图倒置答案

【问题标题】：d3 bar chart is upside downd3条形图倒置
【发布时间】：2013-02-21 20:08:18
【问题描述】：

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

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

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

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

到这里：

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

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

【问题讨论】：

【解决方案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); });

【讨论】：

【解决方案2】：

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

就是这样！

【讨论】：

【解决方案3】：

设置 y 属性似乎可行：

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

【讨论】：