D3.JS 基于javascript的图表展示库<三>----基本元素绑定
2013-03-23 21:24
701 查看
请现在 http://download.csdn.net/detail/a6383277/5174146下载 对应的示例。
运行 index0.html看下效果先。
1.运行demo 推荐使用Chrome浏览器,IE9或者FireFox(需要安装firebug).如果不会使用浏览器的开发者工具(按F12),请先对其有个了解。学习javascript,开发者工具的使用必须有一定的了解
2.重要函数 会在注释后加 ###### 标记
3.看注释前 请先运行Demo,看看效果,再看解释就很清楚了。
4.博客必要的说明 大多写在了注释里面。
Demo 0 的内容主要是一个数据的基本绑定。
html:
js:
Demo1 主要说明了一下,数据绑定的过程,包括更新,删除,添加
对应的压缩包内的 index1.html
html:
js:
Demo3 简单的总结代码 对应的是index2.html
html
js:
运行 index0.html看下效果先。
1.运行demo 推荐使用Chrome浏览器,IE9或者FireFox(需要安装firebug).如果不会使用浏览器的开发者工具(按F12),请先对其有个了解。学习javascript,开发者工具的使用必须有一定的了解
2.重要函数 会在注释后加 ###### 标记
3.看注释前 请先运行Demo,看看效果,再看解释就很清楚了。
4.博客必要的说明 大多写在了注释里面。
Demo 0 的内容主要是一个数据的基本绑定。
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Data</title> <script type="text/javascript" src="lib/d3.v3.js"></script> <script type="text/javascript" src="databind0.js"></script> </head> <body> <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <input type="button" value="绑定数据" onclick="bindData()"/> <p> 鼠标右键审查元素,查看本页html的元素,然后点击按钮,查看元素的变化 </p> </body> </html>
js:
var dataset0 = [1,"A",2,"B",3]; function bindData(){ /* selector.data(dataset) d3使用函数data(collection)绑定数据。默认是按下标绑定数据的。 collection表示数组 */ var p = d3.select("div") //选择一个div .selectAll("p") //选择div下的所有p元素 .data(dataset0) // ######绑定数据。 .text(function(d,i){ //i:当前数组下标,d:当然数组下标所对应的值 var text = "遍历到该节点的数组下标是:"+i+" 数组数据是: "+d; return text; }); /* ###### text() 表示向添加的元素中加入数据,类似的 函数还有html()等。 其中可以传入 匿名函数, 匿名函数可以接收两个参数,表示遍历到该元素时的数组下标和数组的值。 这个匿名函数在多处都可以使用。等下在页面看一下效果就清楚是什么意思了。 */ //如果p中填充的内容就是当前的数组下标所指向的内容也可以这样写 /* var p = d3.select("div") .selectAll("p") .data(dataset0) .text(String); */ }
Demo1 主要说明了一下,数据绑定的过程,包括更新,删除,添加
对应的压缩包内的 index1.html
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Data</title> <script type="text/javascript" src="lib/d3.v3.js"></script> <script type="text/javascript" src="databind1.js"></script> </head> <body> <div id="content"> <p>这两个p元素将被跟新</p> <p>这两个p元素将被跟新</p> </div> <input type="button" value="绑定数据之更新数据" onclick="bindData('update')"/> <input type="button" value="绑定数据之插入数据" onclick="bindData('insert')"/> <input type="button" value="绑定数据之移除多余元素(请在更新和插入操作后在执行,便于查看效果)" onclick="bindData('remove')"/> <input type="button" value="重置" onclick="bindData('reset')"/> <input type="button" value="绑定数据" onclick="bindData('doall')"/> <div> <p>可以尝试不同的点击顺序 看看分别会出现什么效果</p> </div> </body> </html>
js:
//ps:注释写的有点啰嗦见谅。有错误请在评论中指出,非常感谢。 var dataset0 = [1,"A",2,"B",3]; //javascript是弱语言类型,这样定义数组是允许的,实际上相当于 {0:1,1:"A",2:"B",3:3} //d3像jquery一样支持链式编程 function bindData(operation){ var p = d3.select("div#content") //选择一个div .selectAll("p") //选择div下的所有p元素 .data(dataset0); // ######绑定数据。 //链式编程返回 的数组是最后选择的对象,比如这里就是 所有的p元素 //更新已有元素的数据 if(operation === "update"){ p.text(function(d,i){ return "dataset0["+i+"] 是 "+d; }); }; //插入数据 //###### enter() 函数告诉d3 需要绑定多余的数据, //比如 页面有2个p元素,但是数据有5个,这时 数据个数>需要绑定的Dom元素个数,那么则需要添加Dom元素 if(operation === "insert"){ p.enter() .append("p") //######添加元素的函数,值为string,一般为html或者svg的Dom元素名称,如:html的div,p,span, svg的g,circle,line等 .text(function(d,i){return i+":"+d}); } //移除数据 //在执行完 更新和插入之后,通常会吧多余的元素移除掉。为了省点事,请先运行完成 更新和插入数据后在点击移除按钮 if(operation === "remove"){ //在插入和更新完成以后,现在页面上已经有了五个P元素,现在就利用这五个p元素; //假设一打开页面这5个p就存在 dataset0.pop(); //模拟一组数据,为了效果更加直观,减少原有数组的一个数据 var rp = d3.select("div#content") .selectAll("p") .data(dataset0); rp.exit().remove(); // #### exit() 选择多余的元素, remove()移除选中的元素; } //重置数据 if(operation === "reset"){ dataset0 = [1,"A",2,"B",3]; d3.select("#content").selectAll("p").remove(); d3.select("#content").selectAll("p").data([1,2]).enter().append("p").html("这两个p元素将被跟新"); } if(operation === "doall"){ //先重置 不另外写重置函数了,直接copy上面的 dataset0 = [1,"A",2,"B",3]; d3.select("#content").selectAll("p").remove(); d3.select("#content").selectAll("p").data([1,2]).enter().append("p").html("这两个p元素将被跟新"); //重新绑定数据 p.data(dataset0); //先更新 p.text(function(d,i){ return "dataset0["+i+"] 是 "+d; }); //再插入数据 p.enter() .append("p") .text(function(d,i){return i+":"+d}); } }
Demo3 简单的总结代码 对应的是index2.html
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Data</title> <script type="text/javascript" src="lib/d3.v3.js"></script> <script type="text/javascript" src="databind2.js"></script> </head> <body> <div id="content"> </div> <input type="button" value="绑定数据" onclick="bindData()"/> </body> </html>
js:
var dataset0 = ["A","B","C","D","E"]; //这个列子应该是不规范的,应该更新 删除添加 应该对比 页面上已存在的元素来实现,但这里用了改变数据来模拟,在后面的博客中规范该示例 function bindData(){ var p = d3.select("div#content") .selectAll("p") .data(dataset0); //插入 p.enter() .append("p") .attr("id",String) .text(String); dataset0 = ["A","B","D","F"]; p.data(dataset0); //更新。 p.text(String); //插入时添加了id属性,更新时没有更改id。则可以根据元素的id来判断 更新了哪些元素 //删除 p.exit().remove(); }
相关文章推荐
- D3.JS 基于javascript的图表展示库<二>----基本元素操作
- D3.JS 基于javascript的图表展示库<四>----基本元素选择与Table
- D3.JS 基于javascript的图表展示库<六>-基本柱状图2
- D3.JS 基于javascript的图表展示库<五>-基本柱状图1
- [d3.js] D3.JS 基于javascript的图表展示库<一>----简单介绍
- D3.JS 基于javascript的图表展示库<七>
- Cocos2d-x使用Javascript开发js绑定C++<代码演示样例>
- 从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)
- IT前沿技术之node.js篇<一>:Node.js与javascript
- JavaScript系统学习之一 <基本语法,运算符,流程控制语句>
- javascript 中 <script> 元素几个属性的解释
- JavaScript基础知识<三>
- 【Qt编程】基于Qt的词典开发系列<一>--词典框架设计及成品展示
- 从零开始学_JavaScript_系列(16)——js系列<5>(正则表达式)
- 基于Liferay的平台下,portlet在各个模式下分别加载以<footer-portlet-javascript>定义的js文件的不可行性 推荐
- 【Qt编程】基于Qt的词典开发系列<三>--开始菜单的设计
- 【Linux基础笔记】一些感觉重要的基本命令<三>
- js 代替 <a href="javascript void(0)" onclick="openWin(3,this)"></a>
- JavaScript中的<noscript>元素
- <Javascript>js 计算日期相隔天数