[D3.js] SVG > Axes(坐標軸)


D3的坐標軸組件會自動顯示刻度的參考線。這可以讓你只專注於數據的顯示,而讓坐標軸組件去幫你繪制坐標軸和標記刻度。

Axis Component 6186172 5537697 4573883 4403522 4349486 3892919 3371592 3259783 3212294 2983699 2996766 2996785 1849162 4323929

Axis

 D3的軸組件是為D3的quantitativetime 和 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,以便保留默認的行為。

 

====================== 終於翻譯完畢之分割線 ==========================

 

 原文 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM