上篇成功在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，怎么用，看例子：
很简单是不是，所以，尽情地发散你的编程思维吧。
四、元素插入
原文地址：https://www.cnblogs.com/eco-just/p/9926700.html
时间： 2024-10-08 08:29:59