2015-05-29 97 views
6

在d3.js圖表​​中,默認情況下,x軸線(條形和條形標籤之間的黑線)看起來像這樣:| ------- --------- |,見下圖:D3.js更改x軸路徑線樣式

Note the double line in the pink box. Very unsightly.

我將如何改變這個只是一條直線(沒有垂直線的兩端)?

望着生成的SVG,這段代碼似乎是確定的風格:<path class="domain" d="M0,6V0H824V6"></path>,這是自動生成的D3。

謝謝!

+2

你試過'axis.outerTickSize(0)'嗎? –

+0

這很有效!我閱讀了文檔,但錯過了意思。如果你想把你的回答變成答案,我會接受它。 – ccnokes

回答

9

這是通過控制axis.outerTickSize()

的0的外蜱大小抑制域路徑的平方端部,而不是產生一個直線。

所有你需要做的是設置axis.outerTickSize(0)

2

拉斯Kotthoff的回答仍然是成立之前4.x版D3版本中,有4個版本,它更改爲axis.tickSizeOuter()。請注意,tickSize()也會修改外部標記,這意味着調用tickSize()tickSizeOuter()的順序很重要。

d3.axisBottom(xScale) 
    .tickValues(series) 
    .tickSize(5) 
    .tickSizeOuter(0) 
);