作成者Observable

外観

リボン ​

リボンは、コード図内の2つのノード間のフローの量を視覚的に表現します。リボンには2つの種類があります。ribbonは双方向のフローを表し、ribbonArrowは一方向のフローを表します。後者はchordDirectedに適しています。

ribbon() ​

ソース · デフォルト設定で新しいリボンジェネレーターを作成します。

js
const ribbon = d3.ribbon();

ribbon(...arguments) ​

ソース · 指定されたargumentsのリボンを生成します。argumentsは任意であり、thisオブジェクトとともに、リボンジェネレーターのアクセサ関数に伝播されます。たとえば、デフォルト設定では、コードオブジェクトが期待されます。

js
ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
  target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
}) // "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

リボンジェネレーターにコンテキストがある場合、リボンはこのコンテキストに一連のパスメソッド呼び出しとしてレンダリングされ、この関数はvoidを返します。それ以外の場合は、パスデータ文字列が返されます。

ribbon.source(source) ​

ソース · sourceが指定された場合、ソースアクセサを指定された関数に設定し、このリボンジェネレーターを返します。sourceが指定されていない場合、現在のソースアクセサを返します。デフォルトは

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

ribbon.target(target) ​

ソース · targetが指定された場合、ターゲットアクセサを指定された関数に設定し、このリボンジェネレーターを返します。targetが指定されていない場合、現在のターゲットアクセサを返します。デフォルトは

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

ribbon.radius(radius) ​

ソース · radiusが指定された場合、ソースおよびターゲットの半径アクセサを指定された関数に設定し、このリボンジェネレーターを返します。たとえば、固定半径240ピクセルを設定するには

js
const ribbon = d3.ribbon().radius(240);

これで、ribbonに渡す引数は、ソースとターゲットにradiusプロパティを指定する必要がなくなりました。

js
ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972},
  target: {startAngle: 1.8617078, endAngle: 1.9842927}
}) // "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

radiusが指定されていない場合、現在のソース半径アクセサを返します。デフォルトは

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

ribbon.sourceRadius(radius) ​

ソース · radiusが指定された場合、ソース半径アクセサを指定された関数に設定し、このリボンジェネレーターを返します。radiusが指定されていない場合、現在のソース半径アクセサを返します。デフォルトは

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

ribbon.targetRadius(radius) ​

ソース · radiusが指定された場合、ターゲット半径アクセサを指定された関数に設定し、このリボンジェネレーターを返します。radiusが指定されていない場合、現在のターゲット半径アクセサを返します。デフォルトは

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

慣例により、非対称コード図のターゲット半径は通常、ソース半径から内側に設定されるため、方向付きリンクの端とその関連するグループアークの間にギャップが生じます。

ribbon.startAngle(angle) ​

ソース · angleが指定された場合、開始角度アクセサを指定された関数に設定し、このリボンジェネレーターを返します。angleが指定されていない場合、現在の開始角度アクセサを返します。デフォルトは

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

angleはラジアンで指定され、0は-y（12時）にあり、正の角度は時計回りに進みます。

ribbon.endAngle(angle) ​

ソース · angleが指定された場合、終了角度アクセサを指定された関数に設定し、このリボンジェネレーターを返します。angleが指定されていない場合、現在の終了角度アクセサを返します。デフォルトは

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

angleはラジアンで指定され、0は-y（12時）にあり、正の角度は時計回りに進みます。

ribbon.padAngle(angle) ​

ソース · angleが指定された場合、パッド角度アクセサを指定された関数に設定し、このリボンジェネレーターを返します。angleが指定されていない場合、現在のパッド角度アクセサを返します。デフォルトは

js
function padAngle() {
  return 0;
}

パッド角度は、隣接するリボン間の角度ギャップを指定します。

ribbon.context(context) ​

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

ribbonArrow() ​

ソース · デフォルト設定で新しい矢印リボンジェネレーターを作成します。chordDirectedも参照してください。

ribbonArrow.headRadius(radius) ​

ソース · radiusが指定された場合、矢印ヘッド半径アクセサを指定された関数に設定し、このリボンジェネレーターを返します。radiusが指定されていない場合、現在の矢印ヘッド半径アクセサを返します。デフォルトは

js
function headRadius() {
  return 10;
}