NVD3 - 在座標軸上配置刻度線

Question

我有一個nvd3折線圖，它顯示時間序列，並且不能在x軸上獲得正確的刻度。

對於較長時間跨度，它按預期工作。但對於更短的時間跨度（這裏：12/31/05至01/01/06），同樣的日期顯示多個刻度：

請看看在code for this chart on JSFiddle

我希望圖表僅在數據點顯示滴答，而不是在兩者之間。這是可能的線圖嗎？從我的理解來看，它可能與D3一樣，但我無法弄清楚這個功能是否由nvd3公開。

我試過明確設置chart.xAxis.ticks()沒有成功的刻度數。唯一有什麼作用的是明確地設置刻度值chart.xAxis.tickValues([...])，但我寧願不必自己計算它們。

Answer 1

解決這個問題的方法一般是custom multi-scale time formats。請注意，這個例子本身不適用於NVD3，因爲它使用D3的舊版本，下面的例子將會。

你的情況的問題是，蜱不是「乾淨」的時間劃分，如果你應用多尺度格式，你會得到類似this的東西。它總是顯示更精細的格式，因爲其他任何情況都會導致精度損失。

然而，如果小時小於3，您可以使用簡單的啓發式來顯示日期而不是時間，這對您的情況來說效果相當好。示例見here。做到這一點的正確方法是使你的蜱清潔分裂。

這將我們帶入您的實際問題。有沒有其他辦法，而不是明確設置.tickValues()你想做的事，但你可以很容易地計算出在你的數據在x位置：

var xvalues = [], 
    tmp = data.map(function(e) { 
      return e.values.map(function(d) { return d[0]; }); 
      }); 
xvalues.concat.apply(xvalues, tmp); 

的代碼是不是最漂亮的，因爲這是一個嵌套的結構，但還算直截了當。使用此功能，您可以明確設置您的標記值，完整示例here。