d3.js入门之DOM操作
2024-08-26 10:20:59
上篇成功在vue项目中把d3跑起来了,接下来对d3的基本操作做个汇总:
一、d3元素选择器
d3.select(".skill"):选择第一个类名为skill的元素并返回这个元素对象(实现链式语法)
d3.selectAll("p"):选择所有的p标签并返回这些元素对象(实现链式语法)
d3.select(".skill").select("p"):选择第一个类名为skill元素下的所有p标签
二、d3数据绑定
这里是通过datum()来为节点绑定数据,注意这里绑定数据只是绑定,如果不输出的话页面是没有效果的,我们可以看到在数据输出的函数text()里面有个匿名函数,其中有两个函参,i表示操作对象(这里是arr)项数的索引(这对选择指定元素很有帮助),d表示之前为其绑定的数据;
经过测试datum()函数将会把参数绑定到每个节点对象上,也就是说每个对象绑定的数据都是一样的,无论参数是字符串还是数组(亲测,放入数组的话,直接绑定的是数组各项相加)
结果:
换成data()
结果:
所以,批量绑定相同数据使用datum(),不同节点绑定不同数据使用data()!!!
三、为指定元素执行操作
方法很多,比如为那个元素添加id、class,但是我们应当用好上面所说的索引i,怎么用,看例子:
很简单是不是,所以,尽情地发散你的编程思维吧。
四、元素插入
最新文章
- 设置这些之后,Google突然可以打开了
- PostgreSQL数据库中的常见错误
- Hibrenate学习的第一天
- ps还能用脚本切片?
- 快销品 车销批发管理手持终端PDA系统 打印开单 入库 库存 盘点多功能一体
- zabbix源码安装
- JAVA基础知识之网络编程——-TCP/IP协议,socket通信,服务器客户端通信demo
- MYSQL写入数据时报错ERROR 1366 (HY000): Incorrect string value: '\xE8\x8B\xB1\xE5\xAF\xB8...' for c 插入中文不能插入
- SQL批量修改表名
- How to changes to Table &; EDT Relations[AX2012]
- What the hell is Rotate?
- unity3D与网页的交互
- Kettle之数据抽取、转换、装载
- 【Android Developers Training】 6. 配置Action Bar
- net core 使用tagHelper将 enum枚举类型转换为下拉列表select
- 如何处理JS,css与smarty标签的冲突
- Windows系统下安装运行Kafka
- nginx-2-nginx的反向代理
- Scala学习(六)练习
- ACM-ICPC 2018 焦作赛区网络预赛 E Jiu Yuan Wants to Eat (树链剖分+线段树)