初学D3.js---数据集与选择数据

浅沫～

已于 2022-09-02 20:34:47 修改

阅读量766

点赞数

分类专栏： D3 文章标签： d3

于 2019-06-21 22:33:51 首次发布

本文链接：https://blog.csdn.net/qq_39579290/article/details/88567084

版权

D3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一：什么是D3？

d3，简单来说，就是一种基于javascript的数据可视化库，其效果一般展现在网页中，可交互。

使用方法：首先需下载d3相应的库，导入方法：<script src="d3库的路径"></script>。也可以在联网的情况下直接写d3的下载路径，此时不用下载。

二：数据集

在js中选择数据通常采用以下方式（假定选择的是所有p标签）：

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<script>
		//选择所有数据
		p=document.getElementsByTagName("p");
		//改变指定数据的颜色
		p[1].style.color="red";
		//选择单个数据
		f=document.getElementById("first");
		f.style.color="cyan";
	</script>
</body>

使用d3选择数据：

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<p>I can up to 20</p>
	<script>
		//选择所有数据
		ps=d3.select("body").selectAll("p");
		//改变ps的颜色
		ps.style("color","red");
		//改变指定数据的颜色
		ps.style("color",function(i){
			if(i==1){return "blue";}
		});
		//改变指定数据的颜色-----使用过滤器
		ps.filter(function(i){
			if(i==2){return true;}
		}).style("color","yellow");
		//选择单个数据
		f=d3.select("body").select("#first");
		f.style("color","cyan");
	</script>
 	</body>

那么，上述代码中的p和f即为D3中的数据集。其中，select表示选择一条数据作为数据集，selectAll表示选择多条数据作为数据集。

三：绑定数据

1.绑定单个数据（datum）

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<script>
		var s=["JavaScript","Jquery","D3"];
		//选择所有数据
		p=d3.select("body").selectAll("p");
		//绑定数据
		var bind=p.datum(s);
		//显示数据
		bind.text(function(d,i){
			return "序号："+i+"，数据："+d;
		});
	</script>
</body>

效果如下：

根据展示结果显示，那么当使用datum绑定数据时，数据集中的所有数据都会与要绑定的数据绑定。

2.绑定多个数据（data）

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<script>
		var dataset=[7,8,9];
		//选择所有数据
		p=d3.select("body").selectAll("p");
		//绑定数据
		var bind=p.data(dataset);
		//显示数据
		bind.text(function(d,i){
			return "序号："+i+"，数据："+d;
		});
	</script>
</body>

效果如下：

那么，根据结果可以知道，当绑定多个数据的数据集时，要绑定的数据会与原有数据中的数据一一对应进行绑定。

由于要绑定的数据会与原有数据中的数据一一对应进行绑定，那么在绑定数据中的过程中就可能会出现要绑定的数据长度与原有数据长度不一致的情况，所以有以下处理方式：

（1）要绑定的数据长度=原有数据长度

此种情况不用增加删除，直接绑定数据即可。

（2）要绑定的数据长度>原有数据长度（enter）

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<script>
		var dataset=[7,8,9,10];
		//选择所有数据
		p=d3.select("body").selectAll("p");
		//绑定数据
		var bind=p.data(dataset);
		//显示数据
		bind.text(function(d,i){
			return "序号："+i+"，数据："+d;
		});
		//处理多余数据
		var add=bind.enter();
		add.append("p").text(function(d,i){
			return "序号："+i+"，数据："+d;
		});
	</script>
</body>

效果如下：

那么，如果不对多余数据进行处理，效果与（1）效果相同。

（3）要绑定的数据长度<原有数据长度（exit）

如果不对原有数据中多余数据进行处理（假定要绑定的数据长度为2，原有数据长度为3），效果如下：

那么此时，如果不需要原有数据的多余数据，可以采取以下方式进行处理：

<body>
	<p id="first">I can up to 5</p>
	<p>I can up to 10</p>
	<p>I can up to 15</p>
	<script>
		var dataset=[7,8];
		//选择所有数据
		p=d3.select("body").selectAll("p");
		//绑定数据
		var bind=p.data(dataset);
		//显示数据
		bind.text(function(d,i){
			return "序号："+i+"，数据："+d;
		});
		//处理多余数据
		var del=bind.exit();
		del.remove();
	</script>
</body>

效果如下：