コンテンツにスキップ

放射状ライン

· 放射状ラインジェネレーターは、デカルト ラインジェネレーター に似ていますが、x アクセサと y アクセサが 角度 アクセサと 半径 アクセサに置き換えられています。放射状ラインは原点に対して配置されます。原点変更には transform を使用してください。

lineRadial()

ソースコード · デフォルト設定で新しい放射状ラインジェネレーターを構築します。

js
const line = d3.lineRadial();

lineRadial(data)

ソースコード · line と同等です。

js
svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");

lineRadial.angle(angle)

ソースコード · line.x と同等ですが、アクセサは- *y*(12時)に0を持つラジアン単位の角度を返します。

js
const line = d3.lineRadial().angle((d) => a(d.Date));

lineRadial.radius(radius)

ソースコード · line.y と同等ですが、アクセサは半径、つまり原点からの距離を返します。

js
const line = d3.lineRadial().radius((d) => r(d.temperature));

lineRadial.defined(defined)

ソースコード · line.defined と同等です。

js
const line = d3.lineRadial().defined((d) => !isNaN(d.temperature));

lineRadial.curve(curve)

ソースコード · line.curve と同等です。curveMonotoneX または curveMonotoneY は、データが *x* または *y* で単調であると想定しているため、放射状ラインには推奨されません。これは通常、放射状ラインには当てはまりません。

js
const line = d3.lineRadial().curve(d3.curveBasis);

lineRadial.context(context)

ソースコード · line.context と同等です。

js
const context = canvas.getContext("2d");
const line = d3.lineRadial().context(context);