第六章 d3形状

d3.arc()

生成arc的path数据

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

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

d3.line()

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
];

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

line.curve()

d3.radialLine()

线条位于极坐标系中，标准线条中的x和y对应radial线条中的angle 和 radius。

d3.area()

area.curve() 插值方式

d3.radialArea()

径向面积图处于极坐标中

Curves

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

var line = d3.line()
   .x(function(d) { return x(d.date); })
   .y(function(d) { return y(d.value); })
   .curve(d3.curveCatmullRom.alpha(0.5));

curveBasis 三次basis spline(B样条曲线)包含起止点

Custom Curves

Links

用于捆图等关系型

Symbols

Symbols提供了一些已定义的图形编码(符号)，通常被用在散点图中。