学习笔记(一)——数据可视化D3.js

javascript/jquery

浏览数:248

2020-6-12


一、简介和安装

    简介

        D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档D3.js是一个基于数据处理文档的JavaScript库。D3帮助我们使用HTML,SVG和CSS将数据带入生活。D3强调网络标准,可以让您充分利用现代浏览器的功能,而无需将自己绑定到专有框架,将强大的可视化组件和数据驱动的方法结合到DOM操作中。

    安装使用

        1:下载d3.js文件:http://github.com/mbostock/d3/releases/download/v3.4.8/d3.zip

将其文件解压之后,放置你对应js文件夹中即可;

        2:直接引用js文件:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

二、学习D3.js

  •     DOM上的数据绑定

            先看个简单的例子:

<!DOCTYPE html>
 <html>
     <head>
         <script type="text/javascript" src="d3.v3.min.js"></script>
     </head>
     <body>
        <script>
         var data = [1,2,3];
         var p = d3.select("body").selectAll("p")
                .data(data)
                .enter()
                .append("p")
                .text("hello");
       </script>
     </body>
 </html>

          很好,现在已经成功使用D3.js把一些数据绑定到了Dom元素上了!

          d3.select ——从当前文档中选择一个元素。

          d3.selectAll ——从当前文档选择多个元素。

          D3.js中的selectAll方法使用的是CSS3中的选择器来获取DOM元素,不同于select方法。但是上述的html网页中并没有p标签,也就是说该方法返回的是一个空的选择结果。因此我们使用 .data()和.enter()把数据绑定到了这个空的选择结果中去。

         D3.js中的.data是把一个数据数组与当前的选择结果联系起来。在上面的例子中,并没有提供key值,因此数组中的每个元素都被分配到当前选择结果中的一个元素上。数组中第一个元素,也就是数字1,被分配到第一个p元素,以此类推。

        但是,正如上面所说的,初始网页中根本就没有p标签,那如何如添加呢?这就需要提到D3.js的Virtual Selections。与D3.js其他方法不同,.data操作符返回的是三个Virtual selection。这3个Virtual selection 是enterupdate以及exit

       enter选集:对所有缺失的元素以占位符placeholder替代;

       update选集:包含现有的元素,并绑定到数据;

       剩下的元素最终都会出现在exit选集中,并被移除。

    由于下面代码得到的选集是空的:

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

因此,虚拟enter选集中包含的是p元素的占位符。

然而D3.js的enter方法是从data操作符返回一个虚拟选集,这个方法只能作用于data操作符,因为data操作符返回的是三个虚拟选集。

var p = d3.select("body").selectAll("p")
   .data(theData)
   .enter()

正如前面所述,对于数组中的数据元素,如果缺少与之对应的DOM元素,那么就会有一个占位符来顶替,而enter方法返回的就是这些占位符集合的引用。

得到这个引用之后,就能对这个集合操作了。需要注意的是,这个引用后只能连接append,insert以及select操作符,通过它们来操作引用所指向的集合。在这些操作链接到 .enter()选集,我们就可以像处理其他选集那样,来对其内容进行更改。

            D3.js的Append操作符

 var p = d3.select("body").selectAll("p")
       .data(theData)
       .enter()
       .append("p")

将.append()作用于.enter()选集之上。对于上一步中所产生的每个占位符,都有一个p元素插入进去。因为在数据中,有3个数据元素,但是在网页中,没有p元素,所以.append()就创建并加入了3个段落元素。当我们对.enter()的选集使用了append操作后,返回的是一个具有3个html段落元素的选集。

            D3.js的text操作符

text操作符是对所有被选择的元素的textContent属性进行赋值。因此每个元素都加入了“hello”。

 

这就是最简单的操作,通过D3.js进行对DOM元素的操作。

作者:WannaOne