D3

链接 ​

🌐 Links

示例 · 链接形状从起点生成到终点的平滑三次贝塞尔曲线。曲线在起点和终点的切线可以是垂直或水平。另请参见径向链接。

来源 · 使用指定的 曲线返回一个新的链接生成器。例如，要在以显示顶部边缘为根的树状图中可视化链接，你可以说：

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

linkVertical() ​

来源 · link 的简写形式，带有 curveBumpY；适合可视化位于显示屏顶部边缘根节点的 tree diagram 中的 links。等同于：

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

linkHorizontal() ​

来源 · link 的缩写形式，带有 curveBumpX；适合可视化位于显示屏左侧边缘的 tree diagram 中的 links。等同于：

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

链接(...参数) ​

🌐 link(...arguments)

Source · 为给定的参数生成一个链接。参数是任意的；它们会与this对象一起传递给链接生成器的访问函数。使用默认设置时，预期是一个具有source和target属性的对象。

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

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

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

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

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

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

源访问器默认为：

🌐 The source accessor defaults to:

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

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

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

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

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

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

目标访问器默认为：

🌐 The target accessor defaults to:

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

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

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

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

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

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

x 访问器默认为：

🌐 The x accessor defaults to:

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

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

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

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

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

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

y 访问器默认为：

🌐 The y accessor defaults to:

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

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

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

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

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

js
link.context() // context

上下文默认值为 null。如果上下文不为 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.

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

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

如果未指定 digits，则返回当前的最大小数位数，默认值为3。

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

js
link.digits() // 3

此选项仅在关联的上下文为 null 时适用，例如当此链接生成器用于生成路径数据时。

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