链接

¥Links

示例 · 链接形状生成从源点到目标点的平滑三次贝塞尔曲线。曲线在起点和终点的切线为 vertical 或 horizontal。另请参阅 径向链接。

¥Examples · The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical or horizontal. See also radial links.

link(curve)

源代码 · 使用指定的曲线返回一个新的 链接生成器。例如，要将 links 可视化为位于显示屏顶部边缘的 树形图，你可以这样写：

¥Source · Returns a new link generator using the specified curve. For example, to visualize links in a tree diagram rooted on the top edge of the display, you might say:

const link = d3.link(d3.curveBumpY)
    .x((d) => d.x)
    .y((d) => d.y);

linkVertical()

源代码 · link 和 curveBumpY 的简写；适用于在以显示屏上边缘为根的 树形图 中可视化 links。等同于：

¥Source · Shorthand for link with curveBumpY; suitable for visualizing links in a tree diagram rooted on the top edge of the display. Equivalent to:

const link = d3.link(d3.curveBumpY);

linkHorizontal()

源代码 · link 和 curveBumpX 的简写；适用于在以显示屏左边缘为根的 树形图 中可视化 links。等同于：

¥Source · Shorthand for link with curveBumpX; suitable for visualizing links in a tree diagram rooted on the left edge of the display. Equivalent to:

const link = d3.link(d3.curveBumpX);

link(...arguments) {#_link}

源代码 · 根据给定的参数生成一个链接。参数任意；它们会随 this 对象一起传递到链接生成器的访问器函数。在默认设置下，预期返回一个具有源和目标属性的对象。

¥Source · Generates a link for the given arguments. The arguments are arbitrary; they are propagated to the link generator’s accessor functions along with the this object. With the default settings, an object with source and target properties is expected.

link({source: [100, 100], target: [300, 300]}) // "M100,100C200,100,200,300,300,300"

link.source(source) {#link_source}

源代码 · 如果指定了 source，则将源访问器设置为指定的函数，并返回此链接生成器。

¥Source · If source is specified, sets the source accessor to the specified function and returns this link generator.

const link = d3.linkHorizontal().source((d) => d[0]);

如果未指定 source，则返回当前源访问器。

¥If source is not specified, returns the current source accessor.

link.source() // (d) => d[0]

源访问器默认为：

¥The source accessor defaults to:

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

link.target(target) {#link_target}

源代码 · 如果指定了 target，则将目标访问器设置为指定的函数，并返回此链接生成器。

¥Source · If target is specified, sets the target accessor to the specified function and returns this link generator.

const link = d3.linkHorizontal().target((d) => d[1]);

如果未指定目标，则返回当前目标访问器。

¥If target is not specified, returns the current target accessor.

link.target() // (d) => d[1]

目标访问器默认为：

¥The target accessor defaults to:

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

link.x(x) {#link_x}

源代码 · 如果指定了 x，则将 x 访问器设置为指定的函数或数字，并返回链接生成器。

¥Source · If x is specified, sets the x-accessor to the specified function or number and returns this link generator.

const link = d3.linkHorizontal().x((d) => x(d.x));

如果未指定 x，则返回当前 x 访问器。

¥If x is not specified, returns the current x accessor.

link.x() // (d) => x(d.x)

x 访问器默认为：

¥The x accessor defaults to:

function x(d) {
  return d[0];
}

link.y(y) {#link_y}

源代码 · 如果指定了 y，则将 y 访问器设置为指定的函数或数字，并返回此链接生成器。

¥Source · If y is specified, sets the y-accessor to the specified function or number and returns this link generator.

const link = d3.linkHorizontal().y((d) => y(d.y));

如果未指定 y，则返回当前的 y 访问器。

¥If y is not specified, returns the current y accessor.

link.y() // (d) => y(d.y)

y 访问器默认为：

¥The y accessor defaults to:

function y(d) {
  return d[1];
}

link.context(context) {#link_context}

源代码 · 如果指定了 context，则设置上下文并返回链接生成器。

¥Source · If context is specified, sets the context and returns this link generator.

const context = canvas.getContext("2d");
const link = d3.link().context(context);

如果未指定 context，则返回当前上下文。

¥If context is not specified, returns the current context.

link.context() // context

上下文默认为 null。如果上下文不为空，则 生成的链接 将作为一系列 路径方法 调用渲染到此上下文。否则，返回一个表示生成的链接的 路径数据 字符串。另请参阅 d3-path。

¥The context defaults to null. If the context is not null, then the generated link is rendered to this context as a sequence of path method calls. Otherwise, a path data string representing the generated link is returned. See also d3-path.

link.digits(digits) {#link_digits}

源代码 · 如果指定了数字，则设置小数点后的最大位数并返回此链接生成器。

¥Source · If digits is specified, sets the maximum number of digits after the decimal separator and returns this link generator.

const link = d3.link().digits(3);

如果未指定数字，则返回当前最大分数数字，默认为 3。

¥If digits is not specified, returns the current maximum fraction digits, which defaults to 3.

link.digits() // 3

此选项仅当关联的 context 为空时适用，例如使用此链接生成器生成 路径数据 时。

¥This option only applies when the associated context is null, as when this link generator is used to produce path data.