D3.js选择器

一、选择目标元素

d3.select(selector)

selector是符合W3C选择器规定的字符串，即在css文档中选择元素的方式。

// 匹配id为idname的第一个元素
d3.select('#idname')

// 匹配类名为.classname的第一个元素
d3.select(".classname")

// 匹配单个元素
d3.select()

// 匹配所有元素
d3.selectAll()

二、对匹配元素的修改

对内容的修改

selection.text(value)
selection.html([value])

对属性的修改

// 返回或修改id、name等属性
selection(name[, value])

// 返回或修改上一个方法不能获得或修改的属性
selection.property(name[, value])

// 返回或修改样式
selection.style(name[, value[, property]])

修改类名

// 返回或修改类名
selection(names[, value])

注意：所有value都可使用function替代，若是function则存在data和index两个参数，data表示绑定数据，index表示元素的索引。

三、SVG

SVG(Scalable Vector Graphics)缩放矢量图形，广义上指的是矢量图形，与之相对应的是位图图像。

位图以像素为单位，矢量图以点和线为单位。当图片放大的一定倍数时，位图图像不可避免的出现像素化锯齿等现象，图片会完全被破坏。而矢量图则不会，矢量图不管缩放倍数如何变化，细节不会被破坏。另外矢量图存储空间很小，不过矢量图的缺点是归于复杂图像难以表示。

在数据可视化中的柱状图、折线图以及各种点线几何图形。矢量图有了很大的用武之地，加上体积小易通过网络传播。因此，W3C在HTML5中定义了svg标签。

四、在HTML中使用SVG作图

H5中的SVG标签

// 绘制线条

SVG图形中不止包含直线（line）、矩形（rect）、椭圆形（ellipse）、多边形（polygon）、折线（polyline）、文字（text），以及强大的路径（path），所有图形都可以路径来制作。

// 使用path绘制圆环

g标签中的transform属性使图形居中，fill属性填充颜色。

在path路径中线从哪里来到哪里去，都包含在属性d中。

• M moveto 表示起点，后跟坐标
• L lineto horizontal
• V vertical lineto
• C curveto
• S smooth curveto
• Q quadratic Bezier curve
• T smooth quadratic Bezier curveto
• A elliptical Arc 椭圆弧
• Z closepath

椭圆弧A具有7个参数和

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

• x 椭圆弧半径
• y 半径
• x-axis-rotation large-arc-flag 弧的旋转方向
• large-arc-flag sweep-flag 弧的渲染方式
• x y 弧的终点

以上了解svg，同时也会觉得直接使用svg非常不方便，因此使用d3.js。
在svg作图时，需要使用大量数据来表示坐标点、路径、填充色等，这是svg的关键。也就是说，svg作图重要的是数据。因此作图首当其冲的是将我们希望使用的数据转变为svg可使用的数据。在转化数据这里，d3提供的生成器可方便快捷的完成任务。

总结下，使用d3作图的步骤分为

1. 创建生成器
2. 转化数据
3. 绘制图形

使用d3绘制svg圆环

// 创建弧形生成器
var arc = d3.arc();

// 转换数据
var cfg = {
  innerRadius:80,//内半径
  outerRadius:100,//外半径
  startAngle:0,//起始角度
  endAngle:2*Math.PI//终止角度
};

//数据转换
var arcdata = arc(cfg);

// 绘制图形
var svg = d3.select('body').append('svg').attr('width', 400).attr('height', 400);

svg.append('g').attr('transform', 'translate('+(400/2)+','+(400/2)+')').append('path').attr('fill', '#000').attr('d', arcdata);