D3.js linkHorizontal() 方法

在 D3.js 中，linkHorizontal() 方法是一个用于生成水平方向的连线路径的函数。它可以用于创建如树状图、流程图等需要连线的数据可视化。

语法

d3.linkHorizontal()

返回值

linkHorizontal() 方法返回一个生成器函数，该生成器函数可以将输入的数据转换为水平方向的连线路径。

用法

linkHorizontal() 方法是使用 D3.js 创建水平连线路径的一个基础方法。当我们要将两个点在水平方向上连接起来时，可以使用如下代码：

const linkGenerator = d3.linkHorizontal();

const linkPath = linkGenerator({
  source: [0, 0],
  target: [100, 100]
});

// linkPath 的值为 "M0,0C0,50 50,50 100,100"

在上面的代码中，我们首先使用 linkHorizontal() 方法创建了一个生成器函数 linkGenerator，然后将两个点 source 和 target 传入该生成器函数，最终得到由 M 和 C 命令串联的路径 linkPath，该路径表示从 (0, 0) 点到 (100, 100) 点的水平连线。

linkHorizontal() 方法返回的生成器函数也可以设置各种属性，以便生成符合特定需求的连线路径。下面给出一些基本用法：

设置 x 函数和 y 函数

linkHorizontal() 方法允许设置 x 函数和 y 函数，用于生成连接路径时的水平坐标和垂直坐标。分别与 linkVertical() 类似，可以使用第一个参数或函数返回 D3.js 的标准化数据格式。

const linkGenerator = d3.linkHorizontal()
  .x(d => d.y)
  .y(d => d.x);

const linkPath = linkGenerator({
  source: { x: 0, y: 0 },
  target: { x: 100, y: 50 }
});

// linkPath 的值为 "M0,0C0,25 50,25 100,50"

在上述代码中，我们根据提供的数据结构为 linkGenerator 设置了 x 函数和 y 函数。接着将包含 source 和 target 字段的对象传入生成器函数，最终生成了挂钩函数的路径 linkPath。

设置 source 和 target

除 x 函数和 y 函数之外，linkHorizontal() 方法也可以直接设置 source 和 target 字段，这将允许我们直接传入点的坐标。如下所示：

const linkGenerator = d3.linkHorizontal()
  .source([0, 0])
  .target([100, 50]);

const linkPath = linkGenerator();

// linkPath 的值为 "M0,0C0,25 50,25 100,50"

此处我们直接使用 source() 和 target() 函数分别传入了两个点的坐标，无需再在生成器函数调用时传入。

结论

linkHorizontal() 方法是 D3.js 中创建水平方向连线路径的核心方法之一。我们可以使用该方法创建各种数据可视化，例如树状图、流程图等的连线路径。linkHorizontal() 方法允许我们设置各种属性，以便生成各种符合需求的连线路径。