D3.js--入门

来源：互联网发布：客户管理系统源码下载编辑：程序博客网时间：2024/06/05 03:10

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

D3.js安装

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

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

<script type="text/javascript" src="<%=request.getContextPath()%>/js/d3/d3.js"></script>

D3的应用

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

//选择<body>中所有的<p>，其文本内容为 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个段落上

<div id="relevanceRuleConfig"><p id="1">----1----</p><p id="2">----2----</p><p id="3">----3----</p></div>

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():删除一个选择集元素

0 0