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() ​

源代码 · 使用默认设置创建一个新的 Ribbon 生成器。

¥Source · Creates a new ribbon generator with the default settings.

js
const ribbon = d3.ribbon();

ribbon(...arguments) {#_ribbon} ​

源代码 · 根据给定的参数生成一个丝带。参数任意；它们会随 this 对象一起传递到带状生成器的访问器函数。例如，在默认设置下，预期为 弦对象：

¥Source · Generates a ribbon for the given arguments. The arguments are arbitrary; they are propagated to the ribbon generator’s accessor functions along with the this object. For example, with the default settings, a chord object is expected:

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，则功能区将作为一系列路径方法调用渲染到此上下文，并且此函数返回 void。否则，返回一个路径数据字符串。

¥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) {#ribbon_source} ​

源代码 · 如果指定了 source，则将源访问器设置为指定的函数，并返回此 ribbon 生成器。如果未指定 source，则返回当前源访问器，默认为：

¥Source · If source is specified, sets the source accessor to the specified function and returns this ribbon generator. If source is not specified, returns the current source accessor, which defaults to:

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

ribbon.target(target) {#ribbon_target} ​

源代码 · 如果指定了 target，则将目标访问器设置为指定的函数，并返回此带状生成器。如果未指定目标，则返回当前目标访问器，默认为：

¥Source · If target is specified, sets the target accessor to the specified function and returns this ribbon generator. If target is not specified, returns the current target accessor, which defaults to:

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

ribbon.radius(radius) {#ribbon_radius} ​

源代码 · 如果指定了 radius ，则将源半径访问器和目标半径访问器设置为指定的函数，并返回此 Ribbon 生成器。例如，设置固定半径为 240 像素：

¥Source · If radius is specified, sets the source and target radius accessor to the specified function and returns this ribbon generator. For example to set a fixed radius of 240 pixels:

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"

如果未指定半径，则返回当前源半径访问器，默认为：

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

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

ribbon.sourceRadius(radius) {#ribbon_sourceRadius} ​

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

¥Source · If radius is specified, sets the source radius accessor to the specified function and returns this ribbon generator. If radius is not specified, returns the current source radius accessor, which defaults to:

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

ribbon.targetRadius(radius) {#ribbon_targetRadius} ​

源代码 · 如果指定了 round ，则根据给定的布尔值启用或禁用舍入，并返回此分区布局。如果未指定半径，则返回当前目标半径访问器，默认为：

¥Source · If radius is specified, sets the target radius accessor to the specified function and returns this ribbon generator. If radius is not specified, returns the current target radius accessor, which defaults to:

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) {#ribbon_startAngle} ​

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

¥Source · If angle is specified, sets the start angle accessor to the specified function and returns this ribbon generator. If angle is not specified, returns the current start angle accessor, which defaults to:

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) {#ribbon_endAngle} ​

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

¥Source · If angle is specified, sets the end angle accessor to the specified function and returns this ribbon generator. If angle is not specified, returns the current end angle accessor, which defaults to:

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) {#ribbon_padAngle} ​

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

¥Source · If angle is specified, sets the pad angle accessor to the specified function and returns this ribbon generator. If angle is not specified, returns the current pad angle accessor, which defaults to:

js
function padAngle() {
  return 0;
}

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

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

ribbon.context(context) {#ribbon_context} ​

源代码 · 如果指定了 context，则设置上下文并返回丝带生成器。如果未指定 context，则返回当前上下文，默认为 null。如果上下文不为空，则 生成的带状区域 将作为一系列 路径方法 调用渲染到此上下文。否则，返回一个表示生成的丝带的 路径数据 字符串。另请参阅 d3-path。

¥Source · If context is specified, sets the context and returns this ribbon generator. If context is not specified, returns the current context, which defaults to null. If the context is not null, then the generated ribbon is rendered to this context as a sequence of path method calls. Otherwise, a path data string representing the generated ribbon is returned. See also d3-path.

ribbonArrow() ​

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

¥Source · Creates a new arrow ribbon generator with the default settings. See also chordDirected.

ribbonArrow.headRadius(radius) {#ribbonArrow_headRadius} ​

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

¥Source · If radius is specified, sets the arrowhead radius accessor to the specified function and returns this ribbon generator. If radius is not specified, returns the current arrowhead radius accessor, which defaults to:

js
function headRadius() {
  return 10;
}