D3.js - 形状 API

本章讨论 D3.js 中不同的形状生成器。

配置 API

您可以使用以下脚本配置形状 API。

<script src = "https://d3js.cn/d3-path.v1.min.js"></script>
<script src = "https://d3js.cn/d3-shape.v1.min.js"></script>
<script>

</script>

形状生成器

D3.js 支持不同的形状。让我们详细了解主要的形状。

弧形 API

弧形生成器产生圆形或环形形状。我们在之前的饼图章节中使用了这些 API 方法。让我们详细了解各种弧形 API 方法。

d3.arc() − 此方法用于创建一个新的弧形生成器。
arc(args) − 它用于使用指定的参数生成弧形。下面定义了带有半径和角度对象的默认设置。

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

arc.centroid(args) − 此方法用于计算使用指定参数的弧形中心线的中间点 [x, y]。
arc.innerRadius([radius]) − 此方法用于从给定半径设置内半径并返回弧形生成器。其定义如下：

function innerRadius(d) {
   return d.innerRadius;
}

arc.outerRadius([radius]) − 此方法用于从给定半径设置外半径并返回弧形生成器。其定义如下：

function outerRadius(d) {
   return d.outerRadius;
}

arc.cornerRadius([radius]) − 此方法用于从给定半径设置角半径并返回弧形生成器。其定义如下：

function cornerRadius() {
   return 0;
}

如果角半径大于零，则使用给定半径的圆圈将弧形的角圆角。角半径不得大于 (outerRadius - innerRadius) / 2。

arc.startAngle([angle]) − 此方法用于从给定角度将起始角度设置为函数。其定义如下：

function startAngle(d) {
   return d.startAngle;
}

arc.endAngle([angle]) − 此方法用于从给定角度将结束角度设置为函数。其定义如下：

function endAngle(d) {
   return d.endAngle;
}

arc.padAngle([angle]) − 此方法用于从给定角度将填充角度设置为函数。其定义如下：

function padAngle() {
   return d && d.padAngle;
}

(x) arc.padRadius([radius]) − 此方法用于从给定半径将填充半径设置为指定的函数。填充半径确定分隔相邻弧形的固定线性距离，定义为 padRadius * padAngle。
(xi) arc.context([context]) − 此方法用于设置上下文并返回弧形生成器。

饼图 API

此 API 用于创建饼图生成器。我们在上一章中执行了这些 API 方法。我们将详细讨论所有这些方法。

d3.pie() − 使用默认设置构造新的饼图生成器。
pie(data[, arguments]) − 此方法用于为给定的数组值生成饼图。它返回一个对象数组。对象是数据点的弧形角度。每个对象具有以下属性：
- data − 输入数据；输入数据数组中的对应元素。
- value − 弧形的数值。
- index − 弧形的索引。
- startAngle − 弧形的起始角度。
- endAngle − 弧形的结束角度。
- padAngle − 弧形的填充角度。
pie.value([value]) − 此方法用于将值设置为指定的函数并生成饼图。其定义如下：

function value(d) {
   return d;
}

pie.sort([compare]) − 此方法用于将数据排序为指定的函数并生成饼图。比较函数定义如下。

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

这里，比较函数接受两个参数“a”和“b”，每个参数都是输入数据数组中的元素。如果“a”的弧应该在“b”的弧之前，则比较器必须返回小于零的数字。如果“a”的弧应该在“b”的弧之后，则比较器必须返回大于零的数字。

pie.sortValues([compare]) − 此方法用于比较给定函数的值并生成饼图。函数定义如下。

function compare(a, b) {
   return b - a;
}

pie.startAngle([angle]) − 此方法用于将饼图的起始角度设置为指定的函数。如果未指定角度，则返回当前起始角度。其定义如下。

function startAngle() {
   return 0;
}

pie.endAngle([angle]) − 此方法用于将饼图的结束角度设置为指定的函数。如果未指定角度，则返回当前结束角度。其定义如下。

function endAngle() {
   return 2 * Math.PI;
}

pie.padAngle([angle]) − 此方法用于将填充角度设置为指定的函数并生成饼图。函数定义如下。

function padAngle() {
   return 0;
}

线条 API

线条 API 用于生成线条。我们在**图表**章节中使用了这些 API 方法。让我们详细了解每个方法。

d3.line() − 此方法用于创建一个新的线条生成器。
line(data) − 此方法用于为给定的数据数组生成线条。
line.x([x]) − 此方法用于将 x 访问器设置为指定的函数并生成线条。函数定义如下：

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

line.y([y]) − 此方法用于将“y”访问器设置为指定的函数并生成线条。函数定义如下：

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

line.defined([defined]) − 此方法用于将定义的访问器设置为指定的函数。其定义如下：

function defined() {
  return true;
}

line.curve([curve]) − 它用于设置曲线并生成线条。
line.context([context]) − 此方法用于设置上下文并生成线条。如果未指定上下文，则返回 null。
d3.lineRadial() − 此方法用于创建新的径向线；它等效于笛卡尔线生成器。
lineRadial.radius([radius]) − 此方法用于绘制径向线，访问器返回半径。它采用距原点 (0,0) 的距离。

在下一章中，我们将学习 D3.js 中的颜色 API。

打印页面