码迷,mamicode.com
首页 > Web开发 > 详细

d3.js入门之DOM操作

时间:2018-11-08 01:12:53      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:ued   成功   表示   执行   帮助   字符   相同   editor   使用   

上篇成功在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,怎么用,看例子:

技术分享图片

技术分享图片

很简单是不是,所以,尽情地发散你的编程思维吧。

四、元素插入

d3.js入门之DOM操作

标签:ued   成功   表示   执行   帮助   字符   相同   editor   使用   

原文地址:https://www.cnblogs.com/eco-just/p/9926700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!