码迷,mamicode.com
首页 > 其他好文 > 详细

d3 数据绑定

时间:2017-05-22 10:26:17      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:local   data   ase   this   spring   执行   占位符   java   host   

绑定过程

选择元素,绑定数据,追加元素

<!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标签当中插入文字

 

d3 数据绑定

标签:local   data   ase   this   spring   执行   占位符   java   host   

原文地址:http://www.cnblogs.com/kugeliu/p/6888229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!