D3js oracle,数据可视化D3.js

一、简介和安装

简介

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

安装使用

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

2：直接引用js文件：

二、学习D3.js

DOM上的数据绑定

先看个简单的例子：

var data = [1,2,3];

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

.data(data)

.enter()

.append("p")

.text("hello");

很好，现在已经成功使用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 是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元素的操