D3.js 中的 Shapes API

在这里，我们将讨论如何在 D3.js 中生成不同的形状。

配置 API

下面提到的脚本可以配置形状 API。

生成器形状

在 d3.js 中，我们可以使用许多不同类型的形状。

让我们了解一下下面讨论的这些形状

• 弧线 API

此弧线生成器将生成一个环形形状或一个圆形。我们已经在饼图的各个章节中应用了这些 API 方法。

让我们详细配置弧线 API 的各种方法。

d3.arc(): 如果我们想要设计一个弧线生成器，那么我们可以使用这个方法。

arc(args): 此方法可用于生成带有给定指定参数的弧线。

带有角度和对象半径的默认设置如下所述

arc.centroid(args): 它用于测量弧线中心线的 [x, y] 中点以及所描述的参数。

arc.innerRadius([radius]): 它可以通过任何提供的半径来固定一个内半径，它将返回弧线生成器。

可以定义如下

arc.outerRadius([radius]): 它用于通过提供的半径来固定一个外半径，它将返回弧线生成器。

可以定义如下

arc.cornerRadius([radius]): 它用于通过提供的半径来固定一个角半径，它将返回弧线生成器。

可以定义如下

如果角半径大于 0，则弧线的角将借助给定的半径圆进行倒圆。此角半径不会大于 radius 值 = (outerRadius - innerRadius) / 2。

arc.startAngle([angle]): 它用于将起始角度设置为来自任何给定角度的函数。

可以描述如下

arc.endAngle([angle]): 它用于将结束角度设置为来自任何给定角度的函数。

可以描述如下

arc.padAngle([angle]): 它用于将填充角度设置为来自任何给定角度的函数。

可以描述如下

arc.padRadius([radius]): 它用于通过提供的半径将填充半径设置为指定函数。 填充半径描述了将相邻弧线分隔开的固定线性距离，描述为 padRadius *padAngle。

arc.context([context]): 它可用于修复上下文，它将返回弧线生成器。

• 饼图 API

饼图 API 用于设计任何饼图生成器。 让我们详细讨论。

d3.pie: 它用于构建具有一些默认设置的生成器。

pie(data[. Arguments]): 它用于生成一个饼图，用于给定数组的值。 它将返回一个对象的数组。 对象是数据弧线的角度。

所有对象都有一些属性，下面将讨论

• data: 输入数据，输入数据数组内的相关组件。
• value: 弧线的数值。
• index: 弧线的索引。
• startAngle: 弧线的起始角度。
• endAngle: 弧线的结束角度。
• padAngle: 弧线的填充角度。

pie.value([value]): 它设置指定的函数值并生成饼图。 描述如下

pie.sort([compare]): 它对指定的函数数据进行排序并生成饼图。 描述如下

pie.sortValues([compare]): 它比较来自任何提供函数的各种值并生成饼图。

描述如下

pie.startAngle([angle]): 它可以应用于将饼图的起始角度固定到描述的函数。 当没有描述角度时，它将返回最新的起始角度。

可以表示如下

pie.endAngle([angle]): 它可以应用于将饼图的结束角度固定到描述的函数。 当没有描述角度时，它将返回最新的结束角度。

可以表示如下

pie.padAngle([angle]): 它可以应用于将填充角度固定到描述的函数并生成饼图。

可以表示如下

示例

以下是使用 d3.arc 和 d3.pie 的基本示例

输出

• 线条 API

这些线条 API 用于生成线条。 我们已经在图形章节中应用了这些 API 方法。

让我们更详细地了解这些方法。

d3.line: 它用于设计线条生成器。

line(data): 它为给定的数据数组生成任何线条。

line.x([x]): 它用于为描述的函数固定 x 访问器并生成一条线。

可以描述如下

line.y([y]): 它用于为描述的函数固定 y 访问器并生成一条线。

可以描述如下

line.defined([defined]): 它用于为描述的函数固定一个定义的访问器。

可以描述如下

line.curve([curve]): 此方法用于生成线条并固定曲线。

line.context([context]): 它用于修复任何上下文并生成该行。 当未描述任何上下文时，它将返回 null。

d3.lineRadial: 它创建径向线。此方法等于线条生成器（笛卡尔坐标）。

lineRadial.radius([radius]): 它的访问器将返回半径并设计一条径向线。它将保持与原点 (0, 0) 的距离。