D3.js学习02_数据绑定data

最新推荐文章于 2025-05-12 13:54:10 发布

原创最新推荐文章于 2025-05-12 13:54:10 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

D3.js 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个简单示例介绍了如何使用D3.js库进行数据绑定，展示了一组数值如何转换为可视化的星号串，并探讨了D3.js在数据可视化领域的基本应用。

D3可以将数据集与元素集进行绑定。

datum()：绑定一个数据到选择集上

data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

<!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>Demo2</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href="css_demo1.css" rel="stylesheet" type="text/css" />
</head>
<body>

<script type="text/javascript">
      var dataset=[1,3,5];
	  var p=d3.select("body").selectAll("p");//找到所有的段落元素,其实并没有找到
	  p.data(dataset)//一对一绑定
	  	.enter()//占位
			.append("p")//添加段落节点
				.text(function(x){//利用匿名函数添加文本节点
					var tx="";
					var i=0;
					while(i<x){
						tx+="*";
						i++;
					}
					return tx;
				});
</script>
</body>
</html>

以上的输出结果是：

***

*****

基于目前学习内容，有以下猜测：

D3的主要应用是可视化，可视化最后由各种元素组合表现，利用数据与元素绑定，应该就是把需要表现的信息与表现信息的单元进行绑定