我爲我的D3圖表日期月/日/年,例如:「2013年10月1日」D3:tickformat方法,只顯示一年
而且我分析他們這樣說:d3.time .format( 「%X」)解析。
但是我如何在我的軸上寫一個.tickFormat()方法來顯示年份(全年,世紀)呢?
我爲我的D3圖表日期月/日/年,例如:「2013年10月1日」D3:tickformat方法,只顯示一年
而且我分析他們這樣說:d3.time .format( 「%X」)解析。
但是我如何在我的軸上寫一個.tickFormat()方法來顯示年份(全年,世紀)呢?
只需在您的分析代碼段中將%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
因此,像這樣找到完整的文檔。
定義你的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()); })
注意。
這沒有工作:.tickFormat(function(time,index){return time.getUTCFullYear();}); – NewToJS 2014-09-02 23:02:47
..IM出現此錯誤:undefined – NewToJS 2014-09-02 23:03:06
你是否在調用'.scale(YOURSCALE)'在你的軸上,並且你正在調用'YOURSCALE'上的'.domain'? – 2014-09-02 23:41:31