D3，基於時間的可變x軸刻度

Question

我正在使用D3.js來生成響應時間隨時間變化的圖表。 以前我使用的是Google Charts，但是它太重了。 D3既輕巧又好用，但是我無法通過Google Charts做到這一點。

問題在於這些圖有時跨越一周，有時跨越一天，有時跨越一小時。 對於每種情況，我都必須手動修改X軸上的刻度線的顯示方式。 我通過比較X軸的第一個和最后一個值，並檢查它們之間有多少時間來做到這一點，如下所示：

if (dateDif < 25) { // daily
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%H:%M'))
        .ticks(d3.time.hours, 3)
        .orient("bottom");
}

else if (dateDif <= 170) {  // ~ weekly
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%d/%m %H:%M'))
        .ticks(d3.time.hours, 24)
        .orient("bottom");
} else { // more than weekly
    xAxis = d3.svg.axis()
        .scale(x)
        .tickFormat(d3.time.format('%d/%m %H:%M'))
        .ticks(d3.time.hours, 96)
        .orient("bottom");
}

但這一點也不好，特別是當圖表中只有幾個值（它們每分鍾生成一次）時，則沒有刻度出現（因為它屬於第一種情況，並且沒有足夠的值可以覆蓋） 3小時）。

您是否知道可以自動適應X軸這種情況的任何插件或方法？

Answer 1

你可以定義一個函數來獲取tickFormat基礎上， dateDif ，這樣你就不會需要這么大的if-else塊。

function getFormat() {
  if (dateDif < 25) {
    return d3.time.format('%H:%M');
  } else {
    return d3.time.format('%d/%m %H:%M');
  }
}

然后，您可以將.ticks()設置為數字。 在輸出中，大約將顯示許多滴答聲。 d3選擇接近您要求值的價格變動，但也做出一些決定以嘗試提供最佳輸出。

// approximately 10 ticks will be displayed
xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(getFormat())
    .ticks(10)
    .orient("bottom");

如果使用此方法，您將無法完全控制要顯示的刻度數，但可以確保顯示刻度數，並且如果您為刻度值選擇了合理的數字，則輸出可能會令人滿意。

這是使用這種技術處理一些人為數據的小提琴 。

Answer 2

d3.svg.axis()在默認情況下非常擅長處理這種類型的行為-嘗試從您的軸上刪除.tickFormat(...) ，並設置.ticks(n) ，其中n是您想要的刻度數軸在任何比例縮放級別-這可能足以滿足您的需求。

以下是一些相關示例：

http://bl.ocks.org/mbostock/2983699

http://bl.ocks.org/mbostock/1166403