d3 数据绑定
Posted 无情码字员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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标签
.data()将dataset里面的数据和body下面的p标签绑定在一起，dataset有五个值，则数据集执行了五次，生成五个p标签
.enter()将数据传递到dom当中，如果dom数不足，则创建一个占位符
.append(),通过enter()创建的占位符创建元素
.text()分别在新创建的p标签当中插入文字
以上是关于d3 数据绑定的主要内容，如果未能解决你的问题，请参考以下文章
使用 d3.js 绑定数据内的数组（动态生成具有恒定性的 d3.svg.line）