初识D3.js

2018-11-12 本文已影响13人依旧丶森

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

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

1. 配置环境

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

<script src="https://d3js.org/d3.v5.min.js"></script>

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

2. D3.js之Hello World

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

<html> 
  <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
      <script src="https://d3js.org/d3.v5.min.js"></script>
  </head> 
    <body> 
        <p></p>
    </body> 
    <script>  
          var body = d3.select("body");
          body.select("p).text("Hello World!")
    </script> 
</html>

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

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

   <p class="p1">Hello World 1</p>
   <p class="p1">Hello World 2</p>
   <p id="p2">Hello World 3</p>

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

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样式

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()

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 的使用方法。

初识D3.js

1. 配置环境

2. D3.js之Hello World

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

猜你喜欢

热点阅读