D3

色带 ​

🌐 Ribbons

彩带在弦图中直观地表示两个节点之间的流量。彩带有两种类型：ribbon表示双向流动，而ribbonArrow表示单向流动。后者适用于chordDirected。

🌐 A ribbon visually represents the volume of flow between two nodes in a chord diagram. Ribbons come in two varieties: ribbon represents a bidirectional flow, while ribbonArrow represents a unidirectional flow. The latter is suitable for chordDirected.

ribbon() ​

来源 · 使用默认设置创建一个新的功能区生成器。

js
const ribbon = d3.ribbon();

ribbon(...参数) ​

🌐 ribbon(...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"

如果带状生成器有一个上下文，那么带状将作为路径方法调用的序列渲染到该上下文中，并且此函数返回空。否则，将返回一个路径数据字符串。

🌐 If the ribbon generator has a context, then the ribbon is rendered to this context as a sequence of path method calls and this function returns void. Otherwise, a path data string is returned.

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 属性。

🌐 Now the arguments you pass to ribbon do not need to specify a radius property on the source and target.

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，则返回当前的源半径访问器，默认值为：

🌐 If radius is not specified, returns the current source radius accessor, which defaults to:

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

按照惯例，非对称弦图中的目标半径通常从源半径插入，导致有向链接的末端与其关联的组弧之间存在间隙。

🌐 By convention, the target radius in asymmetric chord diagrams is typically inset from the source radius, resulting in a gap between the end of the directed link and its associated group arc.

ribbon.startAngle(angle) ​

来源 · 如果指定了 angle，则将起始角度访问器设置为指定的函数，并返回此带状生成器。如果未指定 angle，则返回当前的起始角度访问器，默认值为：

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

角度以弧度为单位指定，0 在 -y（12 点钟方向），正角度顺时针增加。

🌐 The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

ribbon.endAngle(angle) ​

来源 · 如果指定了 angle，则将结束角度访问器设置为指定的函数，并返回该带状图生成器。如果未指定 angle，则返回当前的结束角度访问器，默认值为：

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

角度以弧度为单位指定，0 在 -y（12 点钟方向），正角度顺时针增加。

🌐 The angle is specified in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

ribbon.padAngle(angle) ​

来源 · 如果指定了 angle，则将填充角度访问器设置为指定的函数，并返回此带状生成器。如果未指定 angle，则返回当前的填充角度访问器，默认值为：

js
function padAngle() {
  return 0;
}

填充角度指定相邻条带之间的角度间隙。

🌐 The pad angle specifies the angular gap between adjacent ribbons.

ribbon.context(context) ​

来源 · 如果指定了 context，则设置上下文并返回此带状生成器。如果未指定 context，则返回当前上下文，默认值为 null。如果上下文不为 null，则 生成的带状 会以一系列 path 方法 调用的形式渲染到此上下文中。否则，返回表示生成带状的 路径数据 字符串。另请参见 d3-path。

ribbonArrow() ​

来源 · 使用默认设置创建一个新的箭头丝带生成器。另请参见 chordDirected。

ribbonArrow.headRadius(radius) ​

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

js
function headRadius() {
  return 10;
}