本章讨论D3.js中的不同形状生成器.
您可以使用以下脚本配置Shapes API.
< script src ="https://d3js.org/d3-path.v1.min.js"></脚本> < script src ="https://d3js.org/d3-shape.v1.min.js"></script> < script> </script>
D3.js支持不同的形状.让我们详细介绍一下突出的形状.
弧形发生器产生圆形或环形.我们在前面的饼图章节中使用了这些API方法.让我们详细了解各种Arcs 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([半径]) : 此方法用于设置给定半径的内半径并返回弧生成器.它定义如下 :
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([角度]) : 此方法用于从给定角度设置函数的起始角度.它定义如下 :
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用于创建Pie生成器.我们在前一章中已经执行了这些API方法.我们将详细讨论所有这些方法.
d3.pie() : 使用默认设置构造一个新的饼图生成器.
饼(数据[，参数]) : 此方法用于为给定的数组值生成饼图.它返回一个对象数组.物体是基准的弧角.每个对象都有以下属性 :
数据 : 输入数据;输入数据数组中的相应元素.
值 : 弧的数值.
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); }
);这里，compare函数接受两个参数'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方法.让我们详细介绍每种方法.
d3.line() : 此方法用于创建新的线生成器.
行(数据) : 此方法用于为给定的数据数组生成一行.
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中的Colors API. JS.
