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

回答