D3的坐標軸組件會自動顯示刻度的參考線。這可以讓你只專注於數據的顯示,而讓坐標軸組件去幫你繪制坐標軸和標記刻度。
Axis
D3的軸組件是為D3的quantitative, time 和 ordinal 標度所設計的。
# d3.svg.axis()
新建一個默認的坐標軸。
# aixs(selection)
軸線適用於selection 或 transition。選擇器必須包含一個 svg 或者 g 元素。 例如:
d3.select("body").append("svg") .attr("class", "axis") .attr("width", 1440) .attr("height", 30) .append("g") .attr("transform", "translate(0,30)") .call(axis);
# axis.scale([scale])(量度)
若scale量度有指定,則設置相應量度並返回軸線。若沒有指定,則返回當前量度,默認為線性量度。
# axis.orient([orientation])(方向)
若orientation方向有指定,則設置相應方向並返回。若沒有指定,則返回默認方向“bottom”。支持的方向有:
"top"
- 橫坐標的刻度標注位於軸上方"bottom"
- 橫坐標的刻度標注位於軸下方"left"
- 縱坐標的刻度標注位於軸左邊"right"
- 縱坐標的刻度標注位於軸右邊
如果指定的方向不是以上四個支持的參數之一,則會自動恢復默認值。改變方向只能改變刻度標注和軸路徑相關標簽的位置,並不能改變軸線本身的位置;而要針對當前區域去改變軸的位置,則可以通過指定相應的g元素的transform屬性。
# axis.ticks([arguments...])(刻度)
若arguments 參數有指定,則存儲這些參數,然后在生成刻度時使用並返回。這些參數之后也會被傳給 scale.ticks 去生成刻度值(除非刻度值有通過 axis.tickValues 明確地指定)。同時,這些參數也會被傳進 scale 的 tickFormat 方法去生成默認的刻度格式。若沒有指定參數,則返回默認的刻度參數,默認為[10]。
合適的參數依賴於相關的量度:對於一個線性量度來說,你可以像 axis.ticks(20) 這樣去指定刻度數量;對於對數量度,你應該指定數量同時指定刻度格式;而對於時間量度,像 axis.ticks(d3.time.minutes, 15) 這樣有一個時間間隔會更為恰當。
#axis.tickValues([values])(刻度值)
若指定了values 數組,這些值將會被用於刻度標注,而不會使用量度自動生成的刻度值。如果values 為空,將會清空所有之前設置的刻度值並恢復到原來生成的默認刻度值。若沒有指定刻度值,返回當前設置好的刻度值,默認為空。例如,指定刻度值生成刻度尺:
var xAxis = d3.svg.axis() .scale(x) .tickValues([1, 2, 3, 5, 8, 13, 21]);
這里明確指定的刻度值的優先級高於在 axis.ticks 傳入的參數。但是,所有刻度參數都會傳入 scale 的 tickFormat 方法里即使刻度格式沒有設置;因此,它對於 axis.ticks 和 axis.tickValues 都是有效的。
# axis.tickSize([inner, outer])(刻度線長度)
若指定內部和外側刻度線的長度,則設置之;若無指定,則返回當前內部刻度線的長度,默認為6(6px)。
# axis.innerTickSize([size])(內部刻度線的長度)
若大小指定,則按大小設置內部刻度線的長度並返回軸線。若無指定,則返回當前默認為6的內部刻度線大小。內部刻度線控制着刻度線的長度,從軸本身的位置開始計算偏移。
# axis.outerTickSize([size])(外側刻度線的長度)
若大小指定,按大小設置外側刻度線的長度並返回軸線。若無指定,則返回當前默認為6的外側刻度線大小。外側刻度線控制的是刻度尺值域兩端的刻度線的長度,從軸本身的位置開始計算偏移。然而,“外側刻度線”實際上不是刻度線而是值域路徑中的一部分,它們的位置有相關量度的值域范圍所決定。因此,外側刻度線可能會被第一個或最后一個內部刻度線重合。大小為0的外側刻度線會禁止掉值域路徑的兩端,無法繪制出直線。
# axis.tickPadding([padding])(刻度線與刻度標注之間的填充)
若指定填充,則設置之並返回軸線;反之,返回當前的填充大小,默認為3(3px)。
# axis.tickFormat([format])(刻度標注格式化)
若指定格式,按指定的方法設置格式並返回軸線。若無指定格式,默認為空。空的格式也意味着將會使用 scale 在調用 scale.tickFormat 時的默認格式。這種情況下,在 ticks 里指定的參數就會被傳到 scale.tickFormat 里。
戳 d3.format 幫助創建格式化。例如 axis.tickFormat(d3.format(",.0f")) 會把整數在千位上用逗號隔開來顯示。首先定義格式:var commasFormatter = d3.format(",.0f"),這樣你可以在你的數據上像方法那樣調用它,例如,在以逗號分組的整數前加上貨幣單位:.tickFormat(function(d) { return "$" + commasFormatter(d); })。
注:對於對數(log)量度,刻度的個數無法自定義;但是,刻度標簽的個數可以通過 ticks 定義。同樣的, 對數量度的刻度格式通常會通過 ticks 去指定而不是 tickFormat,以便保留默認的行為。
====================== 終於翻譯完畢之分割線 ==========================