链接
示例 · 链接形状从源点到目标点生成一条平滑的立方贝塞尔曲线。曲线在起点和终点的切线要么是 垂直的,要么是 水平的。另请参阅 径向链接。
link(curve)
源代码 · 使用指定的 curve 返回一个新的 链接生成器。例如,要可视化 链接 在 树状图 中,树状图的根部位于显示屏的顶部边缘,您可以这样说
const link = d3.link(d3.curveBumpY)
.x((d) => d.x)
.y((d) => d.y);
linkVertical()
源代码 · link 的简写形式,带有 curveBumpY;适用于可视化 链接 在 树状图 中,树状图的根部位于显示屏的顶部边缘。等效于
const link = d3.link(d3.curveBumpY);
linkHorizontal()
源代码 · link 的简写形式,带有 curveBumpX;适用于可视化 链接 在 树状图 中,树状图的根部位于显示屏的左侧边缘。等效于
const link = d3.link(d3.curveBumpX);
link(...arguments)
源代码 · 为给定的 arguments 生成一个链接。arguments 是任意的;它们与 this
对象一起传递给链接生成器的访问器函数。使用默认设置,需要一个具有 source 和 target 属性的对象。
link({source: [100, 100], target: [300, 300]}) // "M100,100C200,100,200,300,300,300"
link.source(source)
源代码 · 如果指定了 source,则将源访问器设置为指定的函数并返回此链接生成器。
const link = d3.linkHorizontal().source((d) => d[0]);
如果未指定 source,则返回当前源访问器。
link.source() // (d) => d[0]
源访问器的默认值为
function source(d) {
return d.source;
}
link.target(target)
源代码 · 如果指定了 target,则将目标访问器设置为指定的函数并返回此链接生成器。
const link = d3.linkHorizontal().target((d) => d[1]);
如果未指定 target,则返回当前目标访问器。
link.target() // (d) => d[1]
目标访问器的默认值为
function target(d) {
return d.target;
}
link.x(x)
源代码 · 如果指定了 x,则将 x 访问器设置为指定的函数或数字并返回此链接生成器。
const link = d3.linkHorizontal().x((d) => x(d.x));
如果未指定 x,则返回当前 x 访问器。
link.x() // (d) => x(d.x)
x 访问器的默认值为
function x(d) {
return d[0];
}
link.y(y)
源代码 · 如果指定了 y,则将 y 访问器设置为指定的函数或数字并返回此链接生成器。
const link = d3.linkHorizontal().y((d) => y(d.y));
如果未指定 y,则返回当前 y 访问器。
link.y() // (d) => y(d.y)
y 访问器的默认值为
function y(d) {
return d[1];
}
link.context(context)
源代码 · 如果指定了 context,则设置上下文并返回此链接生成器。
const context = canvas.getContext("2d");
const link = d3.link().context(context);
如果未指定 context,则返回当前上下文。
link.context() // context
上下文默认为 null。如果上下文不为 null,则 生成的链接 将作为一系列 路径方法 调用渲染到此上下文。否则,将返回一个表示生成的链接的 路径数据 字符串。另请参阅 d3-path。
link.digits(digits)
源代码 · 如果指定了 digits,则设置小数点后的最大位数并返回此链接生成器。
const link = d3.link().digits(3);
如果未指定 digits,则返回当前最大小数位数,默认值为 3。
link.digits() // 3