D3条形图是倒挂

然而，它的绘图酒吧下来，用在图表的顶部的基线。

我读过，反过来，从底部起草，我应该在y轴上更改range()。然而

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

，看起来像它的绘制图表的倒数 - 在空间绘制上述每个酒吧，并留下：因此，改变这种：

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

本酒吧自己（从底部绘制）透明。我究竟做错了什么？

你是反转的范围内正确的。

另外，您的矩形应加入这样的：

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

2013-02-21 21:15:06 cmonkey

太好了，谢谢cmonkey。我还没有看到条形图的例子，所以这很有用。 – 2013-02-21 21:55:07

真的很好的解决方案！ – Kamil 2015-05-21 12:02:36

设置在y属性似乎工作：

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

2013-02-21 21:14:26

感谢Mike，但我认为这只是移动了条形图，而不是反转图表，这可能会导致稍后显示y轴标记时出现问题。 – 2013-02-21 21:56:34

的X和Y坐标左上角svg开始。你希望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; })

就是这样！

2017-08-08 05:10:20

回答