D3 笔记四：分组元素、坐标轴、SVG基本图形

本文目前来说，是学完极客学院的《D3.js 入门教程》之后的整理出来的精简知识版，仅仅是为了知识整理。后期我会随着学习的深入，在这个基础上，进行维护与更改。

1. 六种基本图形
   在 SVG 画布的预定义元素里，有六种基本图形：

   • 矩形
   • 圆形
   • 椭圆
   • 线段
   • 折线
   • 多边形

   另外，还有一种比较特殊，也是功能最强的元素：

   • 路径

   画布中的所有图形，都是由以上七种元素组成。

2. 分组元素
   分组元素 <g>，是 SVG 画布中的元素，意思是 group，顾名思义此元素是将其他元素进行组合的容器。

3. 定义坐标轴
   直接先来看示例代码：

   var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];      // 数据
   var linear = d3.scale.linear()      // 定义比例尺
       .domain([0, d3.max(dataset)])
       .range([0, 250]);
   
   var axis = d3.svg.axis()    // 生成比例尺
       .scale(linear)      // 指定比例尺
       .orient("bottom")   // 指定刻度的方向
       .ticks(7);          // 指定刻度的数量

   我们来看看几个新的方法 API：

   • d3.svg.axis()：D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
   • scale()：指定比例尺。
   • orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
   • ticks()：指定刻度的数量。

   注意：V4 版本中坐标轴是这么定义的：var xAxis = d3.axisBottom().scale(xScale);。

4. 添加坐标轴
   定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个分组元素里即可。以下为示例代码：

   svg.append("g")     // 在svg中添加分组元素
       .attr("class", "axis")      // 设定坐标轴组件的class
       .attr("transform", "translate(20, 130)")        // 通过transform设定坐标轴的位置
       .call(axis);        // 添加坐标轴

   在 D3 中，call() 的参数是一个函数。调用之后，会将当前的选择集作为参数传递给此函数。因此，下面两行代码是相等的：

   svg.append("g").call(axis);     // 上下等价
   axis(svg.append(g));