> [Wiki](Home) ? [[API--中文手冊]] ? [[SVG函數]] ? **SVG 軸**
* 本文檔是D3官方文檔中文翻譯,并保持與[最新版](https://github.com/mbostock/d3/wiki/API-Reference)同步。
* 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者:
* 郵箱:zhang_tianxu@sina.com
* QQ群:[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374,[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
D3的軸組件自動展示比例尺參照的線。這使得你可以專注于展示數據,而軸組件需要關心繪制坐標軸和刻度標記的繁瑣任務。
Axis
軸組件設計來和D3的定量,時間和序數比例尺一起使用。
# d3.svg.axis()
創建一個默認的軸。
# axis(selection)
將軸應用到選擇和過渡上。選擇必須包含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 參數則設置刻度尺,并返回軸。如果未指定scale參數,將返回當前的刻度尺,默認為線性刻度。
# axis.orient([orientation])
如果指定了方向orientation 參數則設置orientation ,并返回軸。如果未指定orientation參數,將返回當前的刻度尺,默認為“bottom”。支持下面幾種方向:
? top -刻度位于橫軸域路徑上面
? bottom -刻度位于橫軸域路徑下面
? left -刻度位于縱軸域路徑左邊
? right -刻度位于縱軸域路徑右邊
如果指定的方向是不支持的值之一,該軸將恢復為默認的方向。改變方向將影響刻度和它們的標簽相對于軸路徑的的位置,但不改變該軸本身的位置; 為了改變軸相對于基址圖的位置,可以指定g元素上的transform 變換屬性。
# axis.ticks([arguments…])
如果指定了arguments 參數,存儲指定的參數為之后來用生成刻度并返回軸。參數之后會傳遞給scale.ticks生成刻度值(除非刻度值通過明確地指定axis.tickValues)。參數將傳遞給比例尺的tickFormat方法用來生成默認的刻度格式。如果沒有指定參數,返回當前的刻度參數,默認是[10]。
合適的參數取決于關聯的比例尺:對于線性比例尺,你可以指定刻度數為axis.ticks(20);對于對數比例尺你可以指定數量和刻度格式;對于時間比例尺,時間間隔例如axis.ticks(d3.time.minutes, 15)可能更合適。
# axis.tickValues([values])
如果指定了values 數組,指定的values 將用于刻度,而不是使用使用比例尺的自動刻度生成器。如果values 是null,清空任何預先設定的明確的刻度值,回到原來比例尺的生成器。如果沒有指定values ,返回當前設定的刻度值,默認是null。例如,為了生成刻度為指定的values :
var xAxis = d3.svg.axis()
.scale(x)
.tickValues([1, 2, 3, 5, 8, 13, 21]);
明確地刻度值優先于通過使用axis.ticks設置刻度參數。但是,任何的參數都仍然傳遞給比例尺的tickFormat 函數,如果一個刻度格式也沒設置;這樣,設置axis.ticks和axis.tickValues它可能有效。
# axis.tickSize([inner, outer])
如果指定了inner和outer,設置內部和外部刻度尺寸為指定的值并返回軸。如果inner和outer沒有指定,返回當前的內部刻度尺寸,默認是6。
# axis.innerTickSize([size])
如果指定了size ,設置內部刻度尺寸為指定的值并返回軸。如果沒有指定size ,返回當前的內部刻度尺寸,默認是6。內部刻度尺寸控制刻度線的長度,從軸的原生位置偏移。
# axis.outerTickSize([size])
如果指定了size ,設置外部刻度尺寸為指定的值,并返回軸。如果沒有指定size ,返回當前的外部刻度尺寸,默認是6。外部刻度尺寸控制域路徑末尾的平方長度,從軸的原生位置偏移。這樣,因此,“外刻度”實際上不是刻度但是域路徑的一部分,并且它們的位置由相關的比例尺的域范圍來確定。這樣,外刻度可能與第一個或最后內部刻度重疊。外刻度尺寸0的禁止域路徑的平方端,而不是產生一條直線。
# axis.tickPadding([padding])
如果指定填充邊距,設置填充邊距的指定值并返回對應的axis。如果沒有指定填充邊距,返回當前默認填充邊距(默認為3像素)。
# axis.tickFormat([format])
如果指定格式,格式設置為指定的函數并返回axis。如果沒有指定格式,返回當前格式函數,默認為空。空格式表示應該使用比例尺的默認格式器,此格式通過調用scale.tickFormat產生。在這種情況下,指定的參數同樣傳遞給scale.tickFormat方法。
查看d3.format創建格式的幫助。例如,axis.tickFormat(d3.format(.0f“))將通過逗號分組千位顯示一個整數。首先定義格式器:var commasFormatter = d3.format(”,.0f”) 可以讓你把它作為你的數據的函數,例如,在comma-grouped整數前添加“$”符號:.tickFormat(function(d) { return "$" + commasFormatter(d); })。
注意:對于對數比例尺,刻度的數值不能自定義;然而,刻度的數值標簽可以通過ticks自定義。同樣,對數比例尺刻度的格式器通常是通過ticks而不是tickFormat指定,以保持默認label-hiding行為。
* axis.scale axis.orient小屁孩翻譯,咕嚕校正20140425 21:40:39
* axis.tickPadding axis.tickFormat魏飛20140427譯 咕嚕校對 2014-11-29 17:03:41
* 其余 咕嚕譯 2014-11-29 16:56:20