D3.JS 基于javascript的图表展示库<三>----基本元素绑定

最新推荐文章于 2020-07-31 18:04:20 发布

ec_huyinghuan

最新推荐文章于 2020-07-31 18:04:20 发布

阅读量3.8k

点赞数 1

分类专栏： d3.js

本文链接：https://blog.csdn.net/a6383277/article/details/8711035

版权

d3.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

请现在 http://download.csdn.net/detail/a6383277/5174146下载对应的示例。

运行 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="绑定数据" οnclick="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="绑定数据之更新数据" οnclick="bindData('update')"/>
<input type="button" value="绑定数据之插入数据" οnclick="bindData('insert')"/>
<input type="button" value="绑定数据之移除多余元素(请在更新和插入操作后在执行，便于查看效果)" οnclick="bindData('remove')"/>
<input type="button" value="重置" οnclick="bindData('reset')"/>
<input type="button" value="绑定数据" οnclick="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="绑定数据" οnclick="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();
}

ec_huyinghuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
D3.JS 基于javascript的图表展示库<三>----基本元素绑定

请现在 http://download.csdn.net/detail/a6383277/5174146下载对应的示例。运行 index0.html看下效果先。1.运行demo 推荐使用Chrome浏览器，IE9或者FireFox(需要安装firebug).如果不会使用浏览器的开发者工具（按F12），请先对其有个了解。学习javascript,开发者工具的使用必须有一定的了解2.重要
复制链接

扫一扫