D3.js - 形状 API
本章讨论 D3.js 中的不同形状生成器。
配置 API
您可以使用以下脚本配置形状 API。
<script src = "https://d3js.org/d3-path.v1.min.js"></script> <script src = "https://d3js.org/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]) − 此方法用于将 pad 角度设置为给定角度的函数。其定义如下。
function padAngle() {
return d && d.padAngle;
}
(x) arc.padRadius([radius]) − 此方法用于将 pad 半径设置为给定半径的指定函数。 pad 半径确定相邻圆弧之间的固定线性距离，定义为 padRadius *padAngle。
(xi) arc.context([context]) − 此方法用于设置上下文并返回圆弧生成器。
Pies API
此 API 用于创建 Pie 生成器。 我们在上一章中执行了这些 API 方法。 我们将详细讨论所有这些方法。
d3.pie() − 使用默认设置构造一个新的饼图生成器。
pie(data[,arguments]) −此方法用于为给定的数组值生成饼图。它返回一个对象数组。对象是基准的弧度。每个对象具有以下属性 −
data − 输入基准；输入数据数组中的相应元素。
value − 弧的数值。
index − 弧的索引。
startAngle − 弧的起始角度。
endAngle − 弧的终止角度。
padAngle −圆弧的 pad 角度。
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]) − 该方法用于将 pad 角度设置为指定的函数，并生成饼图，其函数定义如下。
function padAngle() {
return 0;
}
Lines API
Lines 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]) − 此方法用于将defined访问器设置为指定的函数。它定义如下。
function defined() {
return true;
}
line.curve([curve]) −它用于设置曲线并生成线。
line.context([context]) − 此方法用于设置上下文并生成一条线。如果未指定上下文，则返回 null。
d3.lineRadial() − 此方法用于创建新的径向线；它相当于笛卡尔线生成器。
lineRadial.radius([radius]) − 此方法用于绘制径向线，访问器返回半径。它需要与原点(0,0)的距离。
在下一章中，我们将学习 D3.js 中的 Colors API。
