绑定过程
选择元素，绑定数据，追加元素
<!DOCTYPE html>
<html>
<head>
<title>testD3-1.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
</script>
</html>
选中body下面的所有p标签，如果p标签为空，会根据后面绑定的数据添加相应的p标签
.data()将dataset里面的数据和body下面的p标签绑定在一起，dataset有五个值，则数据集执行了五次，生成五个p标签
.enter()将数据传递到dom当中，如果dom数不足，则创建一个占位符
.append(),通过enter()创建的占位符创建元素
.text()分别在新创建的p标签当中插入文字
时间： 2024-12-22 17:23:13