by Observable

外觀

d3-axis ​

軸元件會為位置 比例尺 呈現人類可讀的參考標記。它適用於大多數比例尺類型，包括線性、對數、頻段和時間比例尺，如上所示。

在 SVG 容器（通常為單一 G 元素）的 選取 上呼叫軸元件會填入軸。軸會在原點處呈現。若要變更軸相對於圖表的位置，請在包含元素上指定 轉換屬性。

js
const gx = svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

如果比例尺已變更，請再次呼叫軸元件以更新。對於順暢的動畫，您可以在 轉換 上呼叫它。

js
gx.transition()
    .duration(750)
    .call(d3.axisBottom(x));

軸所建立的元素被視為其公開 API 的一部分。您可以套用外部樣式表或修改產生的軸元素，以 自訂軸的外觀。軸包含一個類別為“domain”的 路徑元素，代表比例尺領域的範圍，接著是類別為“tick”的轉換 g 元素，代表比例尺的每個刻度。每個刻度都有 線元素 來繪製刻度線，以及 文字元素 來顯示刻度標籤。例如，以下是典型的底部導向軸

html
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
  <path class="domain" stroke="currentColor" d="M0.5,6V0.5H880.5V6"></path>
  <g class="tick" opacity="1" transform="translate(0.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.0</text>
  </g>
  <g class="tick" opacity="1" transform="translate(176.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.2</text>
  </g>
  <g class="tick" opacity="1" transform="translate(352.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.4</text>
  </g>
  <g class="tick" opacity="1" transform="translate(528.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.6</text>
  </g>
  <g class="tick" opacity="1" transform="translate(704.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">0.8</text>
  </g>
  <g class="tick" opacity="1" transform="translate(880.5,0)">
    <line stroke="currentColor" y2="6"></line>
    <text fill="currentColor" y="9" dy="0.71em">1.0</text>
  </g>
</g>

軸線的方向是固定的；若要變更方向，請移除舊軸線並建立新軸線。

axisTop(scale) ​

原始碼 · 為指定的 比例尺 建立新的頂端方向軸線產生器，其中包含空的 刻度參數、刻度大小 為 6，以及 內距 為 3。在此方向中，刻度會繪製在水平領域路徑的上方。

axisRight(scale) ​

原始碼 · 為指定的 比例尺 建立新的右端方向軸線產生器，其中包含空的 刻度參數、刻度大小 為 6，以及 內距 為 3。在此方向中，刻度會繪製在垂直領域路徑的右方。

axisBottom(scale) ​

原始碼 · 為指定的 比例尺 建立新的底端方向軸線產生器，其中包含空的 刻度參數、刻度大小 為 6，以及 內距 為 3。在此方向中，刻度會繪製在水平領域路徑的下方。

axisLeft(scale) ​

原始碼 · 為指定的 比例尺 建立新的左端方向軸線產生器，其中包含空的 刻度參數、刻度大小 為 6，以及 內距 為 3。在此方向中，刻度會繪製在垂直領域路徑的左方。

axis(context) ​

原始碼 · 將軸線呈現至指定的 context，它可以是 SVG 容器（SVG 或 G 元素）的 選取，或對應的 轉場。

js
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

axis.scale(scale) ​

原始碼 · 如果指定 scale，則設定 比例尺 並傳回軸線。如果未指定 scale，則傳回目前的比例尺。

js
const xAxis = d3.axisBottom().scale(x);

axis.ticks(...arguments) ​

設定傳遞給 scale.ticks 和 scale.tickFormat 的 arguments，當軸線 呈現 時，並傳回軸線產生器。

arguments 的意義取決於 軸線的比例 類型：最常見的是，arguments 是建議的刻度數量（或時間比例的 時間 間隔），以及自訂如何格式化刻度值的選用 格式 說明。例如，要在線性比例上產生二十個具有 SI 前綴格式化的刻度，請說

js
axis.ticks(20, "s");

要在時間比例上每十五分鐘產生一個刻度，請說

js
axis.ticks(d3.timeMinute.every(15));

這個方法是 axis.tickArguments 的便利函式。例如，這個

js
axis.ticks(10);

等於

js
axis.tickArguments([10]);

如果比例未實作 scale.ticks，這個方法沒有作用，例如 band 和 point 比例。若要明確設定刻度值，請使用 axis.tickValues。若要明確設定刻度格式，請使用 axis.tickFormat。若要直接產生刻度值，請使用 scale.ticks。

axis.tickArguments(arguments) ​

來源 · 如果指定 arguments，則設定傳遞給 scale.ticks 和 scale.tickFormat 的 arguments，當軸線 呈現 時，並傳回軸線產生器。另請參閱 axis.ticks，它使用更為常見。

arguments 的意義取決於 軸線的比例 類型：最常見的是，arguments 是建議的刻度數量（或時間比例的 時間 間隔），以及自訂如何格式化刻度值的選用 格式 說明。例如，要在線性比例上產生二十個具有 SI 前綴格式化的刻度，請說

js
axis.tickArguments([20, "s"]);

要在時間比例上每十五分鐘產生一個刻度，請說

js
axis.tickArguments([d3.timeMinute.every(15)]);

如果未指定 arguments，則傳回目前的刻度參數，預設為空陣列。如果指定 arguments，如果比例未實作 scale.ticks，這個方法沒有作用，例如 band 和 point 比例。若要明確設定刻度值，請使用 axis.tickValues。若要明確設定刻度格式，請使用 axis.tickFormat。

axis.tickValues(values) ​

來源 · 如果指定 values 可迭代物件，則使用指定的刻度值，而不是比例的自動刻度產生器。例如，要在特定值產生刻度

js
const axis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);

明確的刻度值優先於 axis.tickArguments 所設定的刻度參數。不過，如果未設定刻度格式，任何刻度參數仍會傳遞給比例尺的 tickFormat 函式。

如果 values 為 null，則清除先前設定的任何明確刻度值，並回復到比例尺的刻度產生器。如果未指定 values，則傳回目前的刻度值，預設為 null。

axis.tickFormat(format) ​

原始碼 · 如果指定 format，則設定刻度格式函式並傳回軸線。例如，要以千位分組顯示整數

js
axis.tickFormat(d3.format(",.0f"));

更常見的做法是將格式 специ符傳遞給 axis.ticks，其優點是會根據刻度間隔自動設定格式精度

js
axis.ticks(10, ",f");

請參閱 d3-format 和 d3-time-format 以取得建立格式化器的說明。

如果未指定 format，則傳回目前的格式函式，預設為 null。null 格式表示應使用比例尺的預設格式化器，該格式化器是透過呼叫 scale.tickFormat 產生的。在此情況下，axis.tickArguments 所指定的參數也會傳遞給 scale.tickFormat。

axis.tickSize(size) ​

原始碼 · 如果指定 size，則將 內部 和 外部 刻度大小設定為指定的值，並傳回軸線。

js
const axis = d3.axisBottom(x).tickSize(0);

如果未指定 size，則傳回目前的內部刻度大小，預設為 6。

js
axis.tickSize() // 0

axis.tickSizeInner(size) ​

原始碼 · 如果指定 size，則將內部刻度大小設定為指定的值，並傳回軸線。

js
const axis = d3.axisBottom(x).tickSizeInner(0);

如果未指定 size，則傳回目前的內部刻度大小，預設為 6。

js
axis.tickSizeInner() // 0

內部刻度大小控制刻度線的長度，從軸線的原生位置偏移。

軸線.tickSizeOuter(大小) ​

來源 · 如果指定大小，將外部刻度大小設定為指定值並傳回軸線。

js
const axis = d3.axisBottom(x).tickSizeOuter(0);

如果未指定大小，傳回目前的外部刻度大小，預設為 6。

js
axis.tickSizeOuter() // 0

外部刻度大小控制網域路徑方塊末端的長度，從軸線的原生位置偏移。因此，「外部刻度」實際上並非刻度，而是網域路徑的一部分，其位置由關聯比例尺的網域範圍決定。因此，外部刻度可能與第一個或最後一個內部刻度重疊。外部刻度大小為 0 會抑制網域路徑的方塊末端，改為產生一條直線。

軸線.tickPadding(內距) ​

來源 · 如果指定內距，將內距設定為指定像素值並傳回軸線。

js
const axis = d3.axisBottom(x).tickPadding(0);

如果未指定內距，傳回目前的內距，預設為 3 個像素。

js
axis.tickPadding() // 0

軸線.offset(偏移) ​

來源 · 如果指定偏移，將像素偏移設定為指定像素值並傳回軸線。

js
const axis = d3.axisBottom(x).offset(0);

如果未指定偏移，傳回目前的像素偏移。

js
axis.offset() // 0

在devicePixelRatio大於 1 的裝置上，像素偏移預設為 0，否則為 0.5。此預設像素偏移可確保低解析度裝置上的邊緣清晰。