d3 数据绑定

时间 2019-12-01

标签 d3 数据绑定繁體版

原文原文链接

绑定过程

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

<!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标签javascript

.data()将dataset里面的数据和body下面的p标签绑定在一块儿，dataset有五个值，则数据集执行了五次，生成五个p标签html

.enter()将数据传递到dom当中，若是dom数不足，则建立一个占位符java

.append(),经过enter()建立的占位符建立元素spring

.text()分别在新建立的p标签当中插入文字app