D3.js version4教程(6)

路径生成器

在可视化中经常会使用到一些图形元素，比如symbols, arcs, lines 和 areas. 矩形元素可以很容易的使用SVG或Canvas绘制，而其他就比较复杂了，比如扇形和样条曲线等。这个模块提供了许多形状生成器以便直接使用。
图像上的图线是画出来的,在SVG区域上,线段元素是line.但是更方便的元素是路径元素.SVG的path添加比较麻烦.
D3引入了路径生成器的概念,能够自动根据数据生成路径.
用于生成线段的叫做线段生成器.
这些形状可以由数据驱动:每个生成器都提供了将输入数据映射到可视化元素的接口

Arcs(弧)

arc生成器可以生成圆形的或者环形的扇形，可以被用在pie或环形图中。如果start 和 end之间的插值大于τ，则arc生成器会产生一个完整的圆或环。如果小于τ则arc生成器可以设置rounded corners(圆角) 和 angular padding(间隙)。Arcs总是以<0,0>位中心，需要使用transform(参考: SVG, Canvas)来对其进行平移。

d3.arc()
构建一个新的默认的arc生成器
arc(arguments…)
根据指定的arguments生成一个arc。arguments可以是任意的形式的，但是要包含必要的信息，比如使用一个包含半径信息(内外半径)和角度信息(起止角度)的对象绘制arc:
arc(arguments…)

var arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果已经定义了半径信息和角度信息，则就不需要再次指定了，比如:

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果arc生成器包含了context上下文，则会调用一系列path method将arc渲染到上下文中。否则返回一个path data字符串.

arc.centroid(arguments…)
计算参数所表示的弧的中间点[x,y]. 计算方法为(startAngle + endAngle) / 2 and (innerRadius + outerRadius) / 2
arc.innerRadius([radius])
设置或获取内半径。如果没有指定radius则返回当前的内半径
arc.outerRadius([radius])
设置或获取外半径。如果没有指定radius则返回当前的外半径
如果radius为函数，则可以方便的构造出一个基于极坐标系统的堆叠图。经常结合 sqrt scale 一起使用. 如果内半径比外半径大，则内半径和外半径会被交换。负值视为0.
arc.cornerRadius([radius])
设置或获取拐角半径
arc.startAngle([angle])
设置或获取弧形的起始角度并返回arc生成器
arc.endAngle([angle])
设置或获取弧形的终止角度并返回arc生成器
arc.padAngle([angle])
设置或获取间隙角度，间隙可以使得相邻的扇形之间隔开一段距离
padAngle和padRadius是结合使用的，理解为在半径为padRadius处，相邻的两个扇形之间的距离为padAngle。内部使用padAngle*padRadius计算的。这个距离是从扇形的起始两处减去的。
arc.padRadius([radius])
设置或获取padAngle的参考点，默认为null，默认情况下使用sqrt(innerRadius * innerRadius + outerRadius * outerRadius)
arc.context([context])
如果指定了context,则设置context的上下文并返回arc生成器。如果没有指定context则返回当前的上下文，默认为null。如果context非null则generated arc会使用一些列path method方法来渲染。

Pies

pie生成器不直接生成图形，而是计算出一组用于生成pie或圆环的数据集。然后根据计算结果使用arc generator进行绘制.
- d3.pie()
构造一个默认的pie生成器
- pie(data[, arguments…])
根据指定的数组data返回一个对象数组，每个对象都包含一些用于绘制的属性。返回的对象个数和原有的数组个数一致，每个对象包含以下属性:

data - 输入的原始数据元素.
value - 当前pie的值.
index - 基于0的索引.
startAngle - 当前pie 的起始角度.
endAngle - 当前pie的终止角度.
padAngle - 相邻pie之间的间隙.
pie.value([value])
设置或获取数据的值访问器，在实际应用中值可能是任意属性值，因此需要根据实际情况设置访问器
在内部，值访问器会被调用在所有的数据元素上。并传递d,i以及数据集data作为参数。
pie.sort([compare])
如果指定了compare,在数据元素进行排序，这个排序方法可以根据数据元素的任何一个属性进行排序
排序操作不影响生成的元素的顺序，影响的是每个pie的start angle 和 end angle.
pie.sortValues([compare])
与上述排序相比，这个排序针对性更强，它依据值进行排序，而不考虑其他属性的影响
pie.startAngle([angle])
设置或获取所有pie的起始角度。如果没有指定angle则将所有arc的起始角度设置为angle。默认情况下是以0度(12点钟方向)开始计算
pie.endAngle([angle])
设置或获取所有pie的终止角度
置起始角度和终止角度可以将所有的pie限制在某一个角度范围，而不是形成一个完整的圆形结构
pie.padAngle([angle])
设置或获取相邻pie之间的间隙角度

line

d3.line()
使用默认的设置构建一个line生成器
line(data)
使用指定的数据生成一条线，给定的数据顺序应该按照x值排好序。如果为生成器指定了context，则会使用一系列path method将线条渲染到context中。如果没有指定context则返回一系列SVG路径字符串。
line.x([x])
设置或获取x值访问器
在生成线条时，x访问器会对输入的数据依次调用以获取准确的x值。x访问器可以传递当前的数据元素d,索引i以及整个数据集data
line.y([y])
设置或获取y访问器
line.defined([defined])
设置或获取defined访问器，这个访问器指定在数据出现缺失时如何操作。
默认的访问器都假设所有的输入数据都是正确定义的，如果输入的数据没被定义，则会出现断点，defined就是定义此时该如何操作
在生成线条时，值访问器会对输入的元素依次调用，如果能正确读取到x和y属性，则正常，如果不能则将跳过
line.curve([curve])
设置或获取curve factory(曲线)，这个方法类似于v3中的插值方式，因为在实际应用中，可能想让线条更圆滑，而不是菱角分明的折现。默认情况下为curveLinear.
line.context([context])
如果指定了context，则设置上下文并返回线条生成器。如果没有指定则返回当前的上下文，默认为null。如果非null则线条生成器会调用一些列path method将路径信息添加到上下文中
d3.radialLine()
使用默认的设置构建一个radial线条生成器。radial线条与标准笛卡尔坐标系中的线条类似，只不过radial线条位于极坐标系中，标准线条中的x和y对应radial线条中的angle 和 radius。radial总是相对于<0,0>点的，所以要使用transform变换将其移动到指定的位置
radialLine(data)
等价于 line.
radialLine.angle([angle])
等价于 line.x, 只不过返回的是角度值，0度位于12点钟方向
radialLine.radius([radius])
等价于 line.y, 访问器返回的是半径
radialLine.defined([defined])
等价于 line.defined.
radialLine.curve([curve])
等价于 line.curve. 但是不推荐使用 curveMonotoneX 或 curveMonotoneY
radialLine.context([context])
等价于 line.context.

Areas

area生成器可以生成一个区域，来绘制面积图。面积图由两个边界线组成，边界线可以是曲线也可以是折线。通常情况下两条边界线共享同一个x-values (x0 = x1)，不同的是y-value (y0 and y1); 大多数情况下y0是一个常量，用以表示zero。面积图顶部曲线使用x1和y1定义，底部使用x0和y0表示。面积图区域是顺时针的多边形。

d3.area()
使用默认的设置构建一个面积图生成器
area(data)
根据指定的数据返回一个使用路径字符串表示的面积。输入数据需要根据x值排好序。如果生成器包含上下文 context，则区域会被渲染到上下文中。否则会调用一系列path method方法返回一个path data字符串。
area.x([x])
如果指定了x则将x0设置为x并将x1设置为null。如果没有指定则返回当前的x0访问器。
area.x0([x])
设置或获取x0访问器
area.x1([x])
设置或获取x1访问器。默认为null。
area.y([y])
如果指定了y则将 y0 设置为 y 并将 y1 设置为null。
area.y0([y])
设置或获取y0访问器
area.y1([y])
设置或获取y1访问器
area.defined([defined])
当数据中存在非法元素时，也就是出现断点时如何操作
可以通过这个方法使得面积图跳过非法的元素
area.curve([curve])
设置插值方式curve factory ，默认为curveLinear.
area.context([context])
如果指定了context则将路径信息渲染到context上下文中。如果使用canvas画布则需要使用这个方法。
area.lineX0()
area.lineY0()
返回一个线条生成器，线条生成器的x访问器是面积生成器的 x0-accessor，线条生成器的y访问器是面积生成器的y0-accessor
area.lineX1()
返回一个线条生成器，线条生成器的x访问器是面积生成器的 x1-accessor，线条生成器的y访问器是面积生成器的y0-accessor
area.lineY1()
返回一个线条生成器，线条生成器的x访问器是面积生成器的 x1-accessor，线条生成器的y访问器是面积生成器的y1-accessor
d3.radialArea()
径向面积图，与标准面积图不同的是，径向面积图处于极坐标中，对应的访问器为angle和radius，并且相对<0,0>点，需要使用transform变换将其移动到指定的位置

Curves

在二维空间生成一个点序列用来绘制线条或面积图时，除了定位好的这些点外，剩下的工作就是如何将这些点连接起来以形成一个连续的线条或闭合的区域。连接方式有很多种。

线条通常不是直接构造的，而是将线条插值方式传递给line.curve 或 area.curve.
- bundle.beta(beta)
使用指定的捆绑参数返回一个捆绑曲线。参数介于[0,1]. 如果beta为0则会在起止点之间生成一条直线。如果beta为1则会生成一个标准的basis

Custom Curves

曲线样式通常被传递给line.curve 和 area.curve来使用。可以通过使用接口自定义曲线样式。