D3 笔记二：SVG、Canvas、画布、矩形、填充图形

1. 画布是什么

   前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。要绘图，首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。

2. SVG 是什么
   SVG 指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形。除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。

   SVG 特点：

   • SVG 绘制的是矢量图，因此对图像进行放大不会失真。
   • 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
   • 每个图形均视为对象，可更改对象的属性，当然图形也会改变。
   • 不适合游戏应用。

3. Canvas 是什么
   Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。

   Canvas 特点：

   • 绘制的是位图，图像放大后会失真。
   • 不支持事件处理器。
   • 能够以 .png 或 .jpg 格式保存图像。
   • 适合游戏应用。

4. 添加画布
   D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

   使用 D3 在 body 元素中添加 svg 的代码如下：

   var width = 300;  //画布的宽度
   var height = 300;   //画布的高度
   
   var svg = d3.select("body")     //选择文档中的body元素
       .append("svg")              //添加一个svg元素
       .attr("width", width)       //设定宽度
       .attr("height", height);    //设定高度

   有了画布，接下来就可以在画布上作图了。

5. 绘制矩形
   在 SVG 中，矩形的元素标签是 <rect>。例如：

   <svg>
       <rect></rect>
       <rect></rect>
   </svg>

   上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

   • x：矩形左上角的 x 坐标;
   • y：矩形左上角的 y 坐标;
   • width：矩形的宽度
   • height：矩形的高度

   注意：在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

6. 填充足够数量的图形
   这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

   svg.selectAll("rect")   // 选择svg内所有的矩形
       .data(dataset)      // 绑定数组
       .enter()            // 指定选择集的enter部分
       .append("rect");    // 添加足够数量的矩形元素

   有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。