d3.js读书笔记-1

d3.js入门

d3入门

D3是一个强大的数据可视化工具，它是基于Javascript库的，用于创建数据可视化图形。在生成可视化图形的过程中，需要以下几步：

1. 把数据加载到浏览器的内存空间；
2. 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素；
3. 解析每个元素范围内的数据并为其设置相应的可视化属性，实现元素的变换(transforming);
4. 响应用户输入实现元素状态的过渡(transitioning);

SVG

D3最适合用来生成和操作SVG(Scalable Vector Graphics,可伸缩矢量图形)。SVG是一种文本格式，每个SVG都是使用类似于html标记来定义的。在SVG标签中可以嵌入很多可见的元素，包括rect(矩形)、circle(圆形)、ellipse(椭圆形)、line(直线)、text(文本)和path()。下面是简单的定义SVG以及各种嵌入其中的图形。

• SVG

<svg width="500" height="50"></svg>

在这里像素是默认的计量单位，不必加上"px"。

• rect

rect用于绘制矩形。x和y用于指定矩形左上角的坐标(基于像素的坐标系统的原点通常位于画布的左上角)，而width和height用于指定其宽和高。

<rect x="0" y="0" width="500" height="50"/>

• circle

circle用于绘制圆形。cx和cy用于指定圆心坐标，而r用于指定半径。

<circle cx="250" cy="25" r="25"/>

ellipse与circle 类似，只不过每个轴要分别指定半径。因此，半径属性不再是r，而是rx和ry。

<ellipsecx="250" cy="25" rx="100" ry="25"/>

• line

line用于绘制直线。x1和y1用于指定起点坐标，x2和y2用于指定终点坐标。另外，必须用stroke指定直线的颜色才能看得见。

<linex1="0" y1="0" x2="500" y2="50" stroke="black"/>

• text

text用于绘制文本。x用于指定文本左上角的位置，y用于指定字体的基线位置。<text x="250" y="25">Easy-peasy</text>

• path

path用于绘制前面图形之外的其他复杂图形（如地图上的国境线）。

1.3 svg元素的样式

常见的svg属性有下面这些。

fill

图形填充的颜色值

stroke

图形轮廓的颜色值

stroke-width

图形轮廓的宽度

opacity

0.0(完全透明)到1.0(完全不透明)之间的数值

对于文本d3还可以使用font-famliy和font-size这两个属性。

svg中没有"层"和深度的概念，如果多个图形重叠，那么就会出现遮盖的情况。可以在为fill或stroke属性指定颜色的时候使用rgba()。rgba()接受0到255

（包含及）之间的三个值，分别代表红、绿、蓝，还接受第四个0.0到1.0（包含及） 之间的透明度值。

例如下面的这段代码：

<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>

d3.j3语法

基本语法

d3对DOM元素的选择类似于JQuery,如下：

d3.select("body").append("p").text("New paragraph!");

记住一点：在连缀方法时，次序很重要。每个方法的输出必须与下一个方法 期待的输入匹配。如果相邻的输出和输入不匹配，那么结果就像在接力赛跑中把接力棒扔到地上一样。

将数据绑定到DOM元素上，绑定的意思就是把数据“附加”或关联到特定的元素。

    var dataset = [ 5, 10, 15, 20, 25 ];

    d3.select("body").selectAll("p")

    .data(dataset)

    .enter()

    .append("p")

    .text("New paragraph!");

• 选择DOM中的body元素，把它交给连缀方法中的下一个方法。
• 选择DOM中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空 元素代表马上就会创建的段落。
• 解析并数出数据值。dataset数组中有5个值，因而此后的所有方法都将执行五 遍，每次针对一个值。
• 要创建新的绑定数据的元素，必须使用enter()。这个方法会分析当前选择的 DOM元素和传给它的数据，如果数据值比对应的DOM元素多，就创建一个新的占位元素。然后把这个新占位元素的引用交给链中的下一个方法。
• 取得由enter()创建的空占位元素，并把一个p元素追加到相应的DOM中。然后它再把自己刚创建的元素交给链中的下一个方法。
• 取得新创建的p元素，插入文本值。

一个简单的矩形绘制

    //svg元素的宽和高
   var w = 500;
   var h = 100;
   //不同div元素之间的间隔
   var barPadding = 1;

   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
       11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

   //创建svg元素，制定svg元素的宽和高
   var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
             //创建矩形
   svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function(d, i) {
       //返回每个矩形的x坐标轴，从左到右
        return i * (w / dataset.length);
      })
      .attr("y", function(d) {
       //返回每个矩形的Y坐标轴，从上到下
        return h - (d * 4);
      })
      //每个矩形的宽度，减去barPadding，是为了元素之间存在间隔
      .attr("width", w / dataset.length - barPadding)
      //每个矩形的高度
      .attr("height", function(d) {
        return d * 4;
      })
      //为每个矩形填充颜色
      .attr("fill", function(d) {
     return "rgb(0, 0, " + (d * 10) + ")";
      });
             //为每个矩形添加标记
   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
        return d;
      })
      .attr("text-anchor", "middle")
      //这里文本选择在矩形的中央偏下方
      .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
      })
      .attr("y", function(d) {
        return h - (d * 4) + 14;
      })
      //为文本添加css
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "white");

创建散点图

//Width and height
   var w = 500;
   var h = 100;
   //主数组表示每个数据“点”元素，每个子数组包含x坐标和y坐标
   var dataset = [
       [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
       [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
        ];

   //Create SVG element
   var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
   svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return d[0];
      })
      .attr("cy", function(d) {
        return d[1];
      })
      .attr("r", function(d) {
        return Math.sqrt(h - d[1]);
      });
//这里是绘制标签
   svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
        return d[0] + "," + d[1];
      })
      .attr("x", function(d) {
        return d[0];
      })
      .attr("y", function(d) {
        return d[1];
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");