D3：tickformat方法，只顯示一年

Question

我爲我的D3圖表日期月/日/年，例如：「2013年10月1日」

而且我分析他們這樣說：d3.time .format（ 「％X」）解析。

但是我如何在我的軸上寫一個.tickFormat（）方法來顯示年份（全年，世紀）呢？

Answer 1

只需在您的分析代碼段中將%x更改爲%Y即可。

tickFormat: function(d) { 
     var dx = data[0].values[d]; 
     return dx ? d3.time.format('%Y')(new Date(dx)) : ''; 
} 

當然你從哪裏得到你的數據等將是不同的細節：

您可以在https://github.com/mbostock/d3/wiki/Time-Formatting

因此，像這樣找到完整的文檔。

Answer 2

定義你的X軸時，你可以用tickformat修改它並傳入一個函數來返回年份。

下面是一個完整的例子。

var width = 200, height = 200; 
var data = ["10/1/2013", "10/1/2014"].map(d3.time.format("%x").parse) 
var xDomain = [Math.min.apply(null, data), Math.max.apply(null, data)]; 
var x = d3.time.scale().range([0, width]).domain(xDomain) 
var xAxis = d3.svg.axis() 
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); }) 
var svg = d3.select("body").append("svg") 
    .attr('width', 200) 
    .attr('height', 200); 
svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + 180 + ")") 
     .call(xAxis); 

重點線要注意的是，我們指定x軸的tickformat的地方：我們在xDomain使用解析時間指定的var x域

var xAxis = d3.svg.axis() 
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); }) 

注意。