d3.js 形状 api——迹忆客-ag捕鱼王app官网

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

配置api

我们可以使用以下脚本配置 shapes api。

形状生成器

d3.js 支持不同的形状。让我们详细介绍一下突出的形状。

弧线 api

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

• d3.arc() - 此方法用于创建新的弧生成器。
• arc(args) - 用于生成具有指定给定参数的弧。对象半径和角度的默认设置定义如下。

   var arc = d3.arc();
   arc({
      innerradius: 0,
      outerradius: 100,
      startangle: 0,
      endangle: math.pi / 2
   });

• 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;
}

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]) - 此方法用于将定义的访问器设置为指定的函数。它的定义如下。

function defined() {
  return true;
}

• line.curve([curve]) - 用于设置曲线并生成线。
• line.context([context]) - 此方法用于设置上下文并生成一行。如果未指定上下文，则返回 null。
• d3.lineradial() - 此方法用于创建新的径向线；它相当于笛卡尔直线生成器。
• lineradial.radius([radius]) - 此方法用于绘制径向线，访问器返回半径。它需要距离原点（0,0）的距离。

在下一章中，我们将学习 d3.js 中的 colors api。