作者：Observable

外观

色带 ​

色带以直观的方式表示 弦图 中两个节点之间流动的体积。色带分两种：色带 表示双向流动，而 箭头色带 表示单向流动。后者适用于 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，并且此函数将返回 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 并返回此色带生成器。如果未指定 context，则返回当前 context，默认值为 null。如果 context 不为 null，则 生成的色带 将作为一系列 路径方法 调用呈现到此 context。否则，将返回表示生成的色带的 路径数据 字符串。另请参见 d3-path。

ribbonArrow() ​

源代码 · 使用默认设置创建新的箭头色带生成器。另请参见 chordDirected。

ribbonArrow.headRadius(radius) ​

源代码 · 如果指定了 radius，则将箭头头半径访问器设置为指定的函数并返回此色带生成器。如果未指定 radius，则返回当前箭头头半径访问器，默认值为

js
function headRadius() {
  return 10;
}