d3的scale()函數

對

scale()是座標轉換函數,用法如下:

var scale = d3.scale.linear(); //<- scale是javascript函數!
.domain([100, 500]);
.range([10, 350]);

 

用這個函數執行的話(結果參考上圖):
scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350
 

另外經常與scale()一起用的D3的 max(), min()函數:

var dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ];
 
d3.max(dataset, function(d) {    //Returns 480
    return d[0];  //References first value in each sub-array
});
d3.max(dataset, function(d) {    //Returns 95
    return d[1];  //References second value in each sub-array
});
 

y軸的轉化

因爲在瀏覽器上,左上角是座標原點,X軸向右爲正,Y軸向爲正。用D3描畫一般常用數學座標系時,需要把Y軸轉向。
方法是:
把 .range([0, h]); 改寫爲
.range([h, 0]);

發佈了9 篇原創文章 · 獲贊 7 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章