开发手册 欢迎您！
软件开发者资料库

D3.js - 形状API

D3.js Shapes API - 从简单和简单的步骤学习D3.js，从基本到高级概念，包括简介，安装，概念，选择，数据连接，SVG简介，SVG转换，转换，动画，绘图，图表，地理位置，数组，集合，选择，路径，尺度，轴，形状，颜色，过渡，拖动，缩放，请求，分隔符分隔值，计时器API，工作示例。

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

配置API

您可以使用以下脚本配置Shapes API.

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

形状生成器

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

Arcs API

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

  • d3.arc() :  ;此方法用于创建新的圆弧生成器.

  • arc(args) : 它用于生成具有指定给定参数的弧.具有对象半径和角度的默认设置定义如下.

  • 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]) : 此方法用于设置上下文并返回一个弧生成器.

Pies API

此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用于生成一行.我们在图表一章中使用了这些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.