学习笔记（一）——数据可视化D3.js

时间 2019-11-18

原文原文链接

1、简介和安装

简介

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

安装使用

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

将其文件解压以后，放置你对应js文件夹中便可；java

2：直接引用js文件：git

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

2、学习D3.js

DOM上的数据绑定

先看个简单的例子：github

<!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()把数据绑定到了这个空的选择结果中去。app

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

可是，正如上面所说的，初始网页中根本就没有p标签，那如何如添加呢？这就须要提到D3.js的Virtual Selections。与D3.js其余方法不一样，.data操做符返回的是三个Virtual selection。这3个Virtual selection 是enter、update以及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元素的操做。

学习笔记（一）——数据可视化D3.js

1、简介和安装

简介

安装使用

2、学习D3.js

DOM上的数据绑定