分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

d3.js入门之DOM操作

发布时间:2023-09-06 02:21责任编辑:苏小强关键词:jsDOM

上篇成功在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操作

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved