2016-06-09 78 views
0

D3中有可能具有線性刻度但使用(序數式)標籤嗎?D3中帶標籤的線性刻度

我想在X軸下顯示月份名稱。我一開始使用了順序規模,它運行良好;但事實證明D3縮放不適用於順序縮放。

所以我想要有線性刻度(0-11作爲月份數字),但是當我們渲染軸的時候會得到月份名稱。那可能嗎?任何建議/解決方法,讚賞。

回答

1

我實現了這個使用Axis.tickFormat

例如,

var y = d3.scale.linear() 
.range([height, 0]); 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left") 
.ticks(5) 
.tickFormat(function (d) { 
    switch(d) { 
     case 40: return "Monday"; break; 
     case 50: return "Tuesday"; break; 
     case 60: return "Wednesday"; break; 
     case 70: return "Thursday"; break; 
     case 80: return "Friday"; break; 
    } 
}); 
+1

你可以爲所有月份創建一個數組,並使用函數(d){return arr [d]; }也在tickformat()中 –

+0

謝謝你的建議。絕對更清潔。 – akshayKhot

+0

剛剛意識到,不是'd'是指實際的滴答價值?例如。在上面的例子中,'d'將取值40,50等,那麼我怎樣才能使用'arr [d]'?我嘗試過'函數(d,i)',但它給出了錯誤 – akshayKhot

1

應該像下面這樣,但你需要相應地映射你的「數據」。

var data = [40,50,60,70,80] 
var days = ["Mon","Tue","Wed","Thu","Fri"] 

var yAxis = d3.svg.axis() 
.scale(y) 
.orient("left") 
.ticks(5) 
.tickFormat(function (d,i) { 
    return days[i]; 
});