作成者Observable

外観

リンク ​

例 · リンクシェイプは、始点から終点までスムーズな3次ベジエ曲線を生成します。曲線の始点と終点における接線は、垂直または水平のいずれかです。放射状リンクも参照してください。

ソースコード · 指定されたcurveを使用して新しいリンクジェネレーターを返します。例えば、ディスプレイの上端にルートを持つツリーダイアグラムのリンクを可視化するには、次のように記述します。

js
const link = d3.link(d3.curveBumpY)
    .x((d) => d.x)
    .y((d) => d.y);

linkVertical() ​

ソースコード · curveBumpY を使用したlinkの略記です。ディスプレイの上端にルートを持つツリーダイアグラムのリンクの可視化に適しています。次と同等です。

js
const link = d3.link(d3.curveBumpY);

linkHorizontal() ​

ソースコード · curveBumpX を使用したlinkの略記です。ディスプレイの左端にルートを持つツリーダイアグラムのリンクの可視化に適しています。次と同等です。

js
const link = d3.link(d3.curveBumpX);

link(...引数) ​

ソースコード · 指定された引数に対するリンクを生成します。引数は任意であり、thisオブジェクトと共にリンクジェネレーターのアクセサー関数に渡されます。デフォルト設定では、sourceとtargetプロパティを持つオブジェクトが期待されます。

js
link({source: [100, 100], target: [300, 300]}) // "M100,100C200,100,200,300,300,300"

ソースコード · sourceが指定されている場合、ソースアクセサーを指定された関数に設定し、このリンクジェネレーターを返します。

js
const link = d3.linkHorizontal().source((d) => d[0]);

sourceが指定されていない場合、現在のソースアクセサーを返します。

js
link.source() // (d) => d[0]

ソースアクセサーのデフォルトは次のとおりです。

js
function source(d) {
  return d.source;
}

ソースコード · targetが指定されている場合、ターゲットアクセサーを指定された関数に設定し、このリンクジェネレーターを返します。

js
const link = d3.linkHorizontal().target((d) => d[1]);

targetが指定されていない場合、現在のターゲットアクセサーを返します。

js
link.target() // (d) => d[1]

ターゲットアクセサーのデフォルトは次のとおりです。

js
function target(d) {
  return d.target;
}

ソースコード · xが指定されている場合、xアクセサーを指定された関数または数値に設定し、このリンクジェネレーターを返します。

js
const link = d3.linkHorizontal().x((d) => x(d.x));

xが指定されていない場合、現在のxアクセサーを返します。

js
link.x() // (d) => x(d.x)

xアクセサーのデフォルトは次のとおりです。

js
function x(d) {
  return d[0];
}

ソースコード · yが指定されている場合、yアクセサーを指定された関数または数値に設定し、このリンクジェネレーターを返します。

js
const link = d3.linkHorizontal().y((d) => y(d.y));

yが指定されていない場合、現在のyアクセサーを返します。

js
link.y() // (d) => y(d.y)

yアクセサーのデフォルトは次のとおりです。

js
function y(d) {
  return d[1];
}

ソースコード · contextが指定されている場合、コンテキストを設定し、このリンクジェネレーターを返します。

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

contextが指定されていない場合、現在のコンテキストを返します。

js
link.context() // context

コンテキストのデフォルトはnullです。コンテキストがnullでない場合、生成されたリンクは、一連のパスメソッド呼び出しとしてこのコンテキストにレンダリングされます。それ以外の場合は、生成されたリンクを表すパスデータ文字列が返されます。d3-pathも参照してください。

ソースコード · digitsが指定されている場合、小数点以下の桁数の最大値を設定し、このリンクジェネレーターを返します。

js
const link = d3.link().digits(3);

digitsが指定されていない場合、現在の最大小数桁数（デフォルトは3）を返します。

js
link.digits() // 3

このオプションは、関連するcontextがnullの場合、つまりこのリンクジェネレーターがパスデータの生成に使用される場合にのみ適用されます。