d3.js 之SVG：矢量化图形绘制

SVG

Scalable Vector Graphics 是一个成熟的W3C标准，被设计用来在web和移动平台 上展现可交互的图形。和HTML相似，SVG也支持CSS和JavaScript。尽管能够使用 HTML展现数据，SVG才是数据可视化领域的事实标准。

咱们在右边的示例中，简短回顾一下SVG的经常使用元素：

• SVG文档：svg
• 分组：g
• 矩形：rect
• 圆形：circle
• 椭圆：ellipse
• 折线：polyline
• 多边形：polygon
• 文字：text
• 路径：path

d3的选择集支持SVG，咱们能够套用HTML的那些操做方法操做SVG文档。

path构造器

使用path，能够画出你能想象的任何形状（参看→_→示例代码的效果）。可是，若是没 有编辑器进行交互的绘制，要手写出这些数值基本是不可能的：

1. <svg>
2. <!--能够使用path元素画任意图形-->
3. <path d="..."></path>
4. </svg>

为了在自动化的数据处理流水线中使用path元素，d3引入了构造器/generator， 这些构造器的功能，就是根据你给定的一些参数，生成path元素所须要的d 属性值：

• 曲线构造器：根据给定的关键点，返回曲线的d字符串
• 区域构造器：根据给定的关键点，返回区域的d字符串
• 圆弧构造器：根据给定的角度坐标，返回圆弧片断的d字符串

→_→的代码定义了两个变量：group和clock，看看这两个变量的定义，体会下构造器的必要性！

曲线构造器

不少数据集能够用二维坐标系中的曲线来进行可视化，每个数据对应曲线上的一个点：

在SVG中，能够使用path元素表征任意的曲线。为了简化d属性的编写，咱们能够使用svg.line()方法建立一个曲线构造器对象：

1. d3.svg.line()

曲线构造器（注意，这指的是line()返回的结果）是一个函数，它要求调用者传入一个数组。 默认状况下，数组的每一项应当是一个包含x、y坐标的数组，第一个值表明x，第二个值表明y。好比：

1. var line = d3.svg.line();
2. var d = line([[10,20],[20,30],[50,70],[100,60]]);

提醒一下，尽管称为line，可是这个方法实际和SVG的line元素毫无关系。

试着查看下→_→代码中line(data)返回的内容，努力记住，line()方法返回的是一个函数！

使用x,y访问器

不少状况下，咱们的数据模型不符合曲线构造器的要求。好比：

1. var data=[
2. {year:1981,yield:129303},
3. {year:1982,yield:901234},
4. ......
5. ];

这时能够使用构造器的x、y访问器函数告诉构造如何访问咱们的数据：

1. line.x([x_accessor])
2. line.y([y_accessor])

构造器会将数据集中的每个数据传入访问器函数，并使用其返回值做为 x坐标或y坐标：

1. var line = d3.svg.line()
2. .x(function(d){return d.year;})
3. .y(function(d){return d.yield;});
4. var d = line(data);

定义插值策略

咱们为曲线构造器仅仅指定了一些关键点，中间点的计算是曲线构造器完成的，这个 过程就是插值。

曲线构造器默认的插值模式是线性插值，因此咱们看到一些直线段将咱们提供 的各个点链接起来。

使用intepolation()方法，能够告诉构造器使用不一样的插值策略：

1. line.interpolate([interpolate])

若是inerpolate参数是一个字符串，表示要求构造器使用一个预置的插值 策略，能够是：

• linear - 线性插值
• linear-closed - 线性插值，封闭起点和终点造成多边形
• step - 步进插值，曲线只能沿x轴和y轴交替伸展
• step-before - 步进插值，曲线只能沿y轴和x轴交替伸展
• step-after - 同step
• basis - B样条插值
• basis-open - B样条插值，起点终点不相交
• basis-closed - B样条插值，链接起点终点造成多边形
• bundle - 基本等效于basis，除了有额外的tension参数用于拉直样条
• cardinal - Cardina样条插值
• cardinal-open - Cardina样条插值，起点终点不相交
• cardinal-closed - Cardina样条插值，链接起点终点造成多边形
• monotone - 立方插值，保留y方向的单调性

interpolate参数也能够是一个函数，这个函数接受传入的数据点集，返回 path的d字符串。咱们先无视掉。

在→_→的代码中，将插值模式改为上面列的值，看看效果有什么不一样？

区域构造器

有些数据集适合用二维坐标系中的曲线区域来进行可视化，这时可认为区域由上下两条线 包围组成：

在SVG中，能够使用path元素表征任意的区域。为了简化d属性的编写，咱们能够使用svg.area()方法建立一个曲线构造器对象：

1. d3.svg.area()

区域构造器是一个函数，它要求调用者传入一个数组，数组的每一项 应当是一个包含x、y坐标的数组，第一个值表明x，第二个值表明y，这表明上面 那条线上的坐标点，好比：

1. var area = d3.svg.area();
2. var d = area([[10,20],[20,30],[50,70],[100,60]]);

第二条线和第一条线有相同的点数。默认状况下，第二条线上每一个数据点的x和 第一条线对应点的x坐标同样，y坐标则保持为0。

→_→的示例效果中，你看到第二条线（水平横线）在上面，这是由于对于SVG坐标系， 原点在左上角。

数据访问器

区域构造器和曲线构造器同样，能够使用访问器定制对用户数据的读取：

1. area.x([x_accessor]);
2. area.y([y_accessor]);
3. area.x0([x_accessor]);
4. area.y0([y_accessor]);

你注意到，因为区域由两条线构成，因此多出了一组x0/y0访问器。

咱们一般使用y0访问器定义比较的基准。

插值

和曲线构造器同样，也能够使用interpolate()定义区域中曲线的插值策略：

1. area.interpolate([interpolate])

在→_→的示例代码中，改变下y0的值，看看有什么不一样？

圆弧构造器

咱们对饼图不陌生，一个圆被分红多份，用不一样的颜色表示不一样的事物：

在SVG中，能够使用path元素表征圆、圆环或扇形。为了简化d属性的编写，咱们能够使用svg.arc()方法建立一个圆弧构造器：

1. d3.svg.arc()

圆弧构造器要求数组中的每一项为一个JSON对象，有如下属性：

• startAngle - 区块的起始角度，以弧度为单位
• endAngle - 弧度的终止角度，以弧度为单位
• innerRadius - 内圆半径
• outerRadius - 外圆半径

→_→的代码中，先建立了一个g元素做为后续元素的分组容器，并设置transform属性将 这个分组移动到适合查看的位置。

数据访问器

和其余构造器同样，圆弧构造器也能够使用数据访问器定制对用户数据的读取，这使其 能够适应不一样的数据结构：

1. area.startAngle([sa_accessor]);
2. area.endAngle([ea_accessor]);
3. area.innerRadius([ir_accessor]);
4. area.outerRadius([or_accessor]);

→_→的示例将一组数据转化为常见的饼图，每一个数据的大小决定了其在整个圆所占 弧度的大小。

var →_→ = http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/