錯誤的d3條形圖上的線條數/刻度線

我有一個簡單的d3條形圖表，我試圖在背景中繪製水平線條。錯誤的d3條形圖上的線條數/刻度線

圖表上的條代表百分比，全高欄爲100％。我想展示4個酒吧，分別爲25％，50％，75％和100％。但如果我這樣做：

svg.selectAll('.rule') 
    .data(y.ticks(4)) 
.enter().append('line') 
    .attr('class', 'rule') 
    .attr('x1', 0) 
    .attr('x2', width) 
    .attr('y1', y) 
    .attr('y2', y);

然後y.ticks(4)顯示5行。如果我將其更改爲3，我會得到2行。如果我將其更改爲5，那麼我仍然會得到5行。 Here's an example on JSFiddle。

此外，在該腳本的末尾，我嘗試添加一個y軸，但它只能水平顯示 - 我如何讓它垂直顯示？這似乎只適用於我見過的所有例子。

來源

2013-02-25 Phil Gyford

ticks()方法d3.scale.linear()的參數只是一個提示。該方法使用這個近似值，但它會選擇「漂亮」的值。（請參閱：https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_ticks）

如果要明確設置值，則需要實例化一個d3.svg.axis()並使用axis.tickValues()（就像您之前所做的那樣）。

關於你的第二個問題。該軸具有默認方向（您將看到），用作水平X軸。您需要撥打.orient("left")或.orient("right")以獲取垂直軸。請注意，如果使用「向左」方向，實際上看不到一個座標軸，則其編號將從SVG的左邊緣運行並被裁剪。所以一般來說，在SVG中添加一些填充並將所有圖形轉移到SVG中是個不錯的主意。如果您使用「正確」方向，您將看到數字，但通常在這種情況下，您需要將軸線翻譯到圖表的右側。

來源

2013-02-25 18:22:03 meetamit

非常好，謝謝 - 稍微擺弄一下，閱讀[這個例子]（http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html），我知道了[所有工作都很好]（http://jsfiddle.net/philgyford/TVNuZ/6/）。 – 2013-02-25 21:22:18

不錯，它看起來不錯。儘管我注意到你的'.axis' CSS風格已經適用於它。因此，軸中的所有內容（包括刻度標籤「font」）都會中斷。它給文本一個獨特的外觀，但我不確定這是故意的。 – meetamit 2013-02-25 23:00:30

哦，是的 - 我想知道爲什麼這看起來很奇怪，但沒有調查。 [立即修復]（http://jsfiddle.net/philgyford/TVNuZ/7/），謝謝。 – 2013-02-26 10:08:38

錯誤的d3條形圖上的線條數/刻度線

回答

相關問題