by Observable

外觀

緞帶 ​

緞帶以視覺方式呈現 弦圖 中兩個節點之間的流量量。緞帶有兩種形式：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"

如果緞帶產生器有 context，則緞帶會以一系列路徑方法呼叫的形式呈現在此 context 中，而此函式會傳回空值。否則，會傳回路徑資料字串。

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;
}