D3.js--入门

D3.js是一个数据可视化展示的javascript库。其封装了很多方法，类似jquery库，使用方法与jquery类似。

D3.js安装

可以到http://d3js.org/下载D3.zip文件

在使用的时候我们只需引入d3.js即可，如下：

D3的应用

d3的方法，大多返回的是一个D3对象，这就使得他能够使用链式语法。例如：

//选择中所有的
，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中
 var p = d3.select("body").selectAll("p").text("www.ourd3js.com");

1.d3选择元素

d3.select():选择所有指定元素的第一个。参数可以是id、元素、样式名

d3.selectAll():选择指定元素的全部。

注意：这两个方法返回的结果即为选择集。

2.d3绑定数据

selection.datum():绑定一个数据到选择集（selection是选择集）

selection.data():绑定一个数组到选择集上，数组的各个数据分别与选择集上各元素绑定

例如：

有3个段落，现在需要将一个字符串分别绑定到3个段落上

----1----
----2----
----3----
 

js代码如下：

datum绑定

var relevanceObj = d3.select("#relevanceRuleConfig");
 var p = relevanceObj.selectAll("p").datum("成功");
 p.text(function(data,i){return "第"+(i+1)+"段落测试"+data;
 });

效果图：

data绑定

var relevanceObj = d3.select("#relevanceRuleConfig");
 var p = relevanceObj.selectAll("p");
 var dataList = ["我是第一段落","我是第二段落","我是第三段落"];
 p.data(dataList).text(function(data,i){return data;
 });

效果图：

3.d3插入元素

selection.append():在选择集末尾插入元素

selection.insert():在选择集下的第一个元素前面插入元素

例如：

relevanceObj.append("p").text("在末尾插入一个段落");
 relevanceObj.insert("p","#p1").text("在开头插入一个段落");

效果图：

d3删除元素

selection.remove():删除一个选择集元素