by Observable

外觀

連結 ​

範例 · 連結形狀會產生從來源點到目標點的平滑三次貝茲曲線。曲線在開始和結束時的切線不是 垂直 就是 水平。另請參閱 徑向連結線。

原始碼 · 使用指定的 curve 傳回新的 連結產生器。例如，若要視覺化根植於顯示器頂端的 連結 中的 樹狀圖，你可以說

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

linkVertical() ​

原始碼 · link 的簡寫，帶有 curveBumpY；適合視覺化 連結 在 樹狀圖 中，其根部位於顯示器的頂端。等同於

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

linkHorizontal() ​

原始碼 · link 的簡寫，帶有 curveBumpX；適合視覺化 連結 在 樹狀圖 中，其根部位於顯示器的左端。等同於

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

link(...arguments) ​

原始碼 · 為給定的 arguments 產生連結。arguments 是任意的；它們會連同 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，則傳回目前的來源存取器。

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

來源存取器的預設值為

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

原始碼 · 如果指定了 target，則將目標存取器設定為指定的函式，並傳回此連結產生器。

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

如果未指定 target，則傳回目前的目標存取器。

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

目標存取器的預設值為

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

原始碼 · 如果指定了 x，則將 x 存取器設定為指定的函式或數字，並傳回此連結產生器。

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

如果未指定 x，則傳回目前的 x 存取器。

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

x 存取器的預設值為

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

原始碼 · 如果指定 y，會將 y 訪問器設定為指定函式或數字，並傳回此連結產生器。

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

如果未指定 y，會傳回目前的 y 訪問器。

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

y 訪問器預設為

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

原始碼 · 如果指定 context，會設定 context 並傳回此連結產生器。

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

如果未指定 context，會傳回目前的 context。

js
link.context() // context

context 預設為 null。如果 context 不為 null，則會將 產生的連結 渲染至這個 context，作為一系列 路徑方法 呼叫。否則，會傳回一個表示產生連結的 路徑資料 字串。另請參閱 d3-path。

原始碼 · 如果指定 digits，會設定小數點後面的最大位數，並傳回此連結產生器。

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

如果未指定 digits，會傳回目前的最大小數位數，預設為 3。

js
link.digits() // 3

此選項僅在關聯的 context 為 null 時套用，例如當此連結產生器用於產生 路徑資料 時。