d3 数据绑定
2024-09-03 23:18:17
绑定过程
选择元素,绑定数据,追加元素
<!DOCTYPE html>
<html>
<head>
<title>testD3-.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 = [ , , , , ]; 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标签当中插入文字
最新文章
- Mint Linux 安装 DotnetCore 遭遇无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系
- 纯CSS气泡效果
- iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist)
- C#创建datatable
- java.io.IOException: open failed: EACCES (Permission denied)问题解决
- hdu1505
- [iOS 多线程 &; 网络 - 2.9] - ASI框架
- 图片中的Exif信息 的ExifDirectory的大部份常量
- Android开发UI之手动显示和隐藏软键盘
- web开发学习之旅---html第一天
- WinForm------DateTime获取月第一天和最后一天取法
- UIView添加支持代码块的手势
- 各浏览器的cookie的name个数/最大容量限制测试
- express 安装和运行
- LeetCode(24)-Balanced Binary Tree
- JBOSSAS 5.x/6.x 反序列化命令执行漏洞(CVE-2017-12149)
- codeforces8A
- 2019微软Power BI 每月功能更新系列——Power BI 4月版本功能完整解读
- Canal学习笔记(客户端)
- 关于mysql的update、delete、和insert into能否使用别名问题