作成者Observabled3-axis
軸コンポーネントは、位置スケールの人間が読める参照マークをレンダリングします。上記のように、線形、対数、バンド、時間スケールなど、ほとんどのスケールタイプで動作します。
SVGコンテナ（通常は単一のG要素）の選択で軸コンポーネントを呼び出すと、軸が生成されます。軸は原点にレンダリングされます。チャートに対する軸の位置を変更するには、コンテナ要素にtransform属性を指定します。
const gx = svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));スケールが変更された場合は、軸コンポーネントをもう一度呼び出して更新します。スムーズなアニメーションの場合は、トランジションで呼び出すことができます。
gx.transition()
.duration(750)
.call(d3.axisBottom(x));軸によって作成された要素は、パブリックAPIの一部と見なされます。外部スタイルシートを適用したり、生成された軸要素を変更して、軸の外観をカスタマイズできます。軸は、スケールのドメインの範囲を表すクラス「domain」のパス要素と、スケールの各目盛を表す変換されたクラス「tick」のg要素で構成されます。各目盛には、目盛線を描画するための線要素と、目盛ラベルのためのテキスト要素があります。たとえば、典型的な下向き軸は次のようになります。
<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(スケール)
ソース · 指定されたスケールに対して、空の目盛引数、目盛サイズ6、パディング3を使用して、新しい上向き軸ジェネレータを構築します。この向きでは、目盛は水平ドメインパスの*上*に描画されます。
axisRight(スケール)
ソース · 指定されたスケールに対して、空の目盛引数、目盛サイズ6、パディング3を使用して、新しい右向き軸ジェネレータを構築します。この向きでは、目盛は垂直ドメインパスの*右*に描画されます。
axisBottom(スケール)
ソース · 指定されたスケールに対して、空の目盛引数、目盛サイズ6、パディング3を使用して、新しい下向き軸ジェネレータを構築します。この向きでは、目盛は水平ドメインパスの*下*に描画されます。
axisLeft(スケール)
ソース · 指定されたスケールに対して、空の目盛引数、目盛サイズ6、パディング3を使用して、新しい左向き軸ジェネレータを構築します。この向きでは、目盛は垂直ドメインパスの*左*に描画されます。
axis(コンテキスト)
ソース · 軸を指定された*コンテキスト*にレンダリングします。これは、SVGコンテナ（SVGまたはG要素）の選択または対応するトランジションのいずれかです。
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));axis.scale(スケール)
ソース · *スケール*が指定されている場合、スケールを設定して軸を返します。*スケール*が指定されていない場合、現在のスケールを返します。
const xAxis = d3.axisBottom().scale(x);axis.ticks(... *引数*)
軸がレンダリングされるときに *スケール*.ticksおよび *スケール*.tickFormatに渡される*引数*を設定し、軸ジェネレータを返します。
*引数*の意味は、軸のスケールのタイプによって異なります。最も一般的なのは、引数が目盛数の推奨*数*（または時間スケールの時間*間隔*）と、目盛値のフォーマット方法をカスタマイズするためのオプションのフォーマット*指定子*です。たとえば、線形スケールでSIプレフィックス形式で20個の目盛を生成するには、次のようにします。
axis.ticks(20, "s");時間スケールで15分ごとに目盛を生成するには、次のようにします。
axis.ticks(d3.timeMinute.every(15));このメソッドは、 *axis*.tickArgumentsの便宜上の関数です。たとえば、これは
axis.ticks(10);次と同等です
axis.tickArguments([10]);このメソッドは、バンドおよびポイントスケールと同様に、スケールが*スケール*.ticksを実装していない場合は効果がありません。目盛値を明示的に設定するには、 *axis*.tickValuesを使用します。目盛形式を明示的に設定するには、 *axis*.tickFormatを使用します。目盛値を直接生成するには、 *スケール*.ticksを使用します。
*axis*.tickArguments(引数)
ソース · *引数*が指定されている場合、軸がレンダリングされるときに *スケール*.ticksおよび *スケール*.tickFormatに渡される*引数*を設定し、軸ジェネレータを返します。 *axis*.ticksも参照してください。これはより一般的に使用されます。
*引数*の意味は、軸のスケールのタイプによって異なります。最も一般的なのは、引数が目盛数の推奨*数*（または時間スケールの時間*間隔*）と、目盛値のフォーマット方法をカスタマイズするためのオプションのフォーマット*指定子*です。たとえば、線形スケールでSIプレフィックス形式で20個の目盛を生成するには、次のようにします。
axis.tickArguments([20, "s"]);時間スケールで15分ごとに目盛を生成するには、次のようにします。
axis.tickArguments([d3.timeMinute.every(15)]);*引数*が指定されていない場合、現在の目盛引数を返します。これはデフォルトでは空の配列です。*引数*が指定されている場合、バンドおよびポイントスケールと同様に、スケールが*スケール*.ticksを実装していない場合、このメソッドは効果がありません。目盛値を明示的に設定するには、 *axis*.tickValuesを使用します。目盛形式を明示的に設定するには、 *axis*.tickFormatを使用します。
axis.tickValues(values)
ソース · *値*の反復可能オブジェクトが指定されている場合、指定された値は、スケールの自動目盛ジェネレータではなく、目盛に使用されます。たとえば、特定の値で目盛を生成するには、次のようにします。
const axis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);明示的な目盛値は、axis.tickArguments で設定された目盛引数よりも優先されます。ただし、目盛フォーマットも設定されていない場合、目盛引数はスケールの tickFormat 関数に渡されます。
values が null の場合、以前に設定された明示的な目盛値をクリアし、スケールの目盛ジェネレーターに戻します。 values が指定されていない場合、現在の目盛値（デフォルトは null）を返します。
axis.tickFormat(format)
ソース · format が指定されている場合、目盛フォーマット関数を設定し、軸を返します。たとえば、整数を千単位でカンマ区切りで表示するには
axis.tickFormat(d3.format(",.0f"));より一般的には、フォーマット指定子が axis.ticks に渡されます。これには、目盛間隔に基づいてフォーマットの精度を自動的に設定できるという利点があります。
axis.ticks(10, ",f");フォーマッターの作成については、d3-format と d3-time-format を参照してください。
format が指定されていない場合、現在のフォーマット関数（デフォルトは null）を返します。 null フォーマットは、スケールのデフォルトのフォーマッターを使用する必要があることを示します。これは、scale.tickFormat を呼び出すことによって生成されます。この場合、axis.tickArguments で指定された引数も同様に scale.tickFormat に渡されます。
axis.tickSize(size)
ソース · size が指定されている場合、内側 と 外側 の目盛サイズを指定された値に設定し、軸を返します。
const axis = d3.axisBottom(x).tickSize(0);size が指定されていない場合、現在の内側の目盛サイズ（デフォルトは 6）を返します。
axis.tickSize() // 0axis.tickSizeInner(size)
ソース · size が指定されている場合、内側の目盛サイズを指定された値に設定し、軸を返します。
const axis = d3.axisBottom(x).tickSizeInner(0);size が指定されていない場合、現在の内側の目盛サイズ（デフォルトは 6）を返します。
axis.tickSizeInner() // 0内側の目盛サイズは、軸の元の位置からオフセットされた目盛線の長さを制御します。
axis.tickSizeOuter(size)
ソース · size が指定されている場合、外側の目盛サイズを指定された値に設定し、軸を返します。
const axis = d3.axisBottom(x).tickSizeOuter(0);size が指定されていない場合、現在の外側の目盛サイズ（デフォルトは 6）を返します。
axis.tickSizeOuter() // 0外側の目盛サイズは、軸の元の位置からオフセットされたドメインパスの正方形の端の長さを制御します。したがって、「外側の目盛」は実際には目盛ではなくドメインパスの一部であり、その位置は関連付けられたスケールのドメインの範囲によって決定されます。そのため、外側の目盛は最初または最後の内側の目盛と重なる場合があります。外側の目盛サイズが 0 の場合、ドメインパスの正方形の端が抑制され、代わりに直線が生成されます。
axis.tickPadding(padding)
ソース · padding が指定されている場合、パディングを指定された値（ピクセル単位）に設定し、軸を返します。
const axis = d3.axisBottom(x).tickPadding(0);padding が指定されていない場合、現在のパディング（デフォルトは 3 ピクセル）を返します。
axis.tickPadding() // 0axis.offset(offset)
ソース · offset が指定されている場合、ピクセルオフセットを指定された値（ピクセル単位）に設定し、軸を返します。
const axis = d3.axisBottom(x).offset(0);offset が指定されていない場合、現在のピクセルオフセットを返します。
axis.offset() // 0ピクセルオフセットのデフォルトは、devicePixelRatio が 1 より大きいデバイスでは 0、それ以外のデバイスでは 0.5 です。このデフォルトのピクセルオフセットにより、低解像度デバイスでも鮮明なエッジが確保されます。