初识D3.js

现在是数据时代，越来越多的人认识到数据的重要性，但是海量的数据并不能展现出它的价值，只有将数据分析、总结，才能够展现它的价值。所以有了数据分析和数据可视化。(个人小见解[•_•])

数据可视化有很多框架和库，看流行趋势和个人喜好。我学习的是D3.js。不多说了，进入正题......

1. 配置环境

进入官网，直接下载d3的压缩包，里面含有d3.js，直接引入即可。也可以直接使用联网的引用，如下所示：

还可以使用node.js作为后台，使用npm安装d3的库。具体实现方法自行百度即可。

2. D3.js之Hello World

Hello World 这句话可是编程界的基石，当之无愧的老大。实现这一步，你就离从入门到“放弃”不远了，不扯了。。。。

3. D3.js的增、删、查和数据绑定

• 1. D3的两种查找
     d3有两种查找方法：select和selectAll

     
  Hello World 1
     
  Hello World 2
     
  Hello World 3
  
     //select查找一个，selectAll查找得到一个列表
     //查找可以通过HTML标签，id和class
     var p1=body.select("#p2")
     var p1_1=body.selectAll(".p1")
  

• 2. D3的数据绑定
     d3有两种数据方法data和datum

      var p=d3.select("body").selectAll("p");
      //为每一个P标签添加相同的字符"你好"
      var datas='你好';
      p.datum(datas).text(function (d,i) {
          return "第"+i+"个元素"+d;
      })
      
      //将列表每一个分别与P标签绑定
      var dataset=[1,3,5]
      p.data(dataset)
      .text(function (d,i) {
          return "第"+i+"个元素"+d;
      })
      //function(d,i)是d3的链式语法，经常用到，d代表数据，i是数据的index编号。
      //通过 d 和 i 判定，为不同的数据显示不同的文字颜色
      .style("color",function (d,i) {
       if (d>3) {
            return "red"
       }
       if (i==0) {
            return "yellow"
       }
       })
       //.text()是文本，.style()是设置css样式
  

• 3. D3的插入和删除
     前面讲了d3的查找，必然就有添加和删除了
     添加有两种append()和insert()，前一个是末尾添加，后一个是在之前添加；remove()是删除。

      //在body里插入标签，insert需要指定放在谁的前面，否则排在最后。
      var body = d3.select("body");
      body.append("p").text("append");
      body.insert("p","#p2").text("insert");
      //删除
      body.select("#p").remove()
  

• 4. D3的update、enter、exit使用
     在使用D3的data将数据和元素绑定时，会有三种情况：
     （1）数据数量 = 元素数量 此时就是update
     （2）数据数量 > 元素数量 此时就是enter
     （3）数据数量 < 元素数量 此时就是exit
     1）. update和enter

      var dataset2=[1,3,5,7,9]
      //enter方法1 分步骤绑定数据
      var update=p.data(dataset2);
      //先得到多余的数据量
      var enter=update.enter();
      //将update数据显示
      update.text(function (d,i) {
            return "update:"+d+",index:"+i;
      })
      //将p标签补全数量
      var Enter=enter.append("p");
      Enter.text(function (d,i) {
            return "enter:"+d+",index:"+i;
      })
  
      //enter方法2 直接简便书写绑定数据
      p.data(dataset2)
      .enter()
      .append("p")
      .text(function (d,i) {
            return "enter2:"+d+",index:"+i;
       })
  

  2）. update和exit

      var dataset3=[1,3]
      // exit方法一
      var update=p.data(dataset3);
      //得到多余的数据量
      var exit=update.exit();
      //先将update数据显示
      update.text(function (d,i) {
           return "update:"+d+",index:"+i;
      })
      //删除多余的p标签，应该直接删除，这里为了显示差别    
      exit.text(function (d,i) {
           return "exit"
      })
      // exit.remove()  //直接删除
  
      // exit方法2
      p.data(dataset3)
      .text(function (d,i) {
           return "exit2:"+d+",index:"+i;
      })
      .exit()
      .remove()
  

  一般情况是使用update和enter，毕竟数据量一般是巨大的，很少有足够数量的与之对应的元素。所以要熟练 enter 的使用方法。