D3.js時標刻度線 - 年只有幾個月 - 自定義時間格式

Question

我試圖做一個縮放圖與x軸的時間刻度。

的默認行爲 ，象這樣一個Xscale：

  var x = d3.time.scale() 
      .domain([getDate(minDate), getDate(maxDate)]) 
      .range([0, width]); 

和x軸，像這樣：

  var xAxis = d3.svg.axis() 
      .scale(x); 

幾乎是我後。

但我想有一個顯示年份的自定義時間格式，而不是顯示月份的名稱，顯示只是一個刻度線，沒有文本（也許可以添加一個類到這些滴答聲），而仍保留縮放時軸的默認行爲。

任何幫助將非常感激。

See JSfiddle here

編輯：我想，Lars' answer here將是一個很好的辦法，只要它可以被應用到可縮放圖。任何新鮮的想法？

Answer 1

這可能工作。爲了顯示年的，而不是顯示月份的名稱，顯示只是一個刻度線，無文字：

var timeAxis = d3.svg.axis() 
     .scale(timeScale) 
     .orient('bottom') 
     .ticks(d3.time.years, 1)//should display 1 year intervals 
     .tickFormat(d3.time.format('%Y'))//%Y-for year boundaries, such as 2011 
     .tickSubdivide(12);//subdivide 12 months in a year 

資源：

1. d3.js主要次要刻度風格（http://bl.ocks.org/vjpgo/4689130）
2. scale.ticks和scale.tickFormat（） （https://github.com/mbostock/d3/wiki/Time-Intervals#year）

示例代碼示出了用於每兩個小時蜱，和格式爲只顯示小時和上午/下午：

var timeAxis = d3.svg.axis() 
     .scale(timeScale) 
     .orient('bottom') 
     .ticks(d3.time.hours, 2) 
     .tickFormat(d3.time.format('%I%p'));