【D3js】d3.select(this)获取到的 DOM对象的数据结构
在 D3js中，操作过程中经常会使用
d3.select(this)命令来获取当前鼠标点击选中的形状元素（诸如矩形 <rect> 、圆形 <circle>、椭圆 <ellipse>、线 <line>、折线 <polyline>、多边形 <polygon>、路径 <path>等）的DOM对象，从而对选中的元素的属性、样式、填充的数据等进行修改、传递、调用等操作。
本文档以 <rect> 元素为例，记录一下 d3.select(this) 获取到到DOM对象的数据结构，以便后期参考查询。
d3.select(this)结构
基本结构以json格式解析，如下图所示：
根key有两个，分别是 _groups 和 _parents ，均为数组类型，其中在初始化生成 矩形时填充的数据存放在 _groups 中，打开 _groups 结构如下：
其中， __data__ 对象就是初始化生成 矩形时填充的数据，__on 对应是是初始化svg图形时添加的事件，示例中是添加了4个鼠标事件，分别是 mouseover、 mousemove、 mouseleave、 mouseup ，具体的事件根据需求进行增减。
获取指定的图块对象
实际业务中，在一个图形展示界面中，经常需要获取指定的图块对象，进行业务处理
let dom = d3.select(this)
获取指定图块 __data__中的数据
let data = d3.select(this)._groups[0][0].__data__
获取指定图块的指定属性的值
// 选中矩形图块的宽度
let width = d3.select(this).attr('width')
// x轴坐标点的值
let x = d3.select(this).attr('x')
获取指定图块的指定样式(CSS)属性的值
// 选中矩形图块的填充样式(填充色或者填充路径)
let fill = d3.select(this).style('fill')
注意：
1. 获取图块属性(标签属性)时，通过 .attr('属性名') 获取；
2. 获取图块样式(CSS属性)时，通过 .style('属性名') 获取；
【D3js】d3.select(this)获取到的 DOM对象的数据结构相关推荐
- ajax中dom,在（jQuery）ajax请求中获取当前脚本DOM对象
涉及两个步骤简单的解决方案: 1)找出哪些元素脚本标签是 2)发现,元素 的代码中的前一个兄弟: var scripts = document.getElementsByTagName("s ...
- 抓取html对象插件,chrome扩展获取页面dom对象信息
chrome扩展,在popup页面,给页面对象绑定点击事件,获取当前tab加载页面的DOM对象信息.本chrome扩展功能主要用于获取百度搜索输入框中用户输入的关键字.效果如下 源代码如下注意:以下文 ...
- jQuery对象和DOM对象使用说明
1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传 ...
- DOM对象与jquery对象有什么不同
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- jquery对象PHP转换,jQuery对象与DOM对象转换方法详解_jquery
本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属 ...
- js-jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- jquery对象和Dom对象的不同
起因是因为我在写一个for循环的时候,trtext获取不到. var ttr=$("#tabFiles tr"); for(var i=0;i<ttr.lenght;i++) ...
- jquery学习手记（2）jQuery对象和DOM对象相互转换
DOM对象 DOM文档对象模型,每一份DOM都可以表示成一棵树. 可以通过js中的getElementById或者getElementById来获取DOM对象. DOM对象可以使用js中的方法. 示例 ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
最新文章
- SpringMVC_数据校验
- 加快LOOP嵌套循环的一个方法
- mysql绕过防火墙_[转载]使用sqlmap 绕过防火墙进行注入测试
- Common Used Excel Formulas
- 文档安全管理系统服务器地址是什么,一种文档安全管理系统登录方法及装置
- 面试了57位程序员，我发现混得好的人都有这个特质！
- 代码编辑器CodeMirror及其简单的配置
- 魔兽世界服务器维护掉线,《魔兽世界怀旧服》老是掉线怎么办 老是掉线解决办法...
- 仓库温度湿度控制措施_一般仓库的温湿度控制范围是多少合适？
- Linux-Ubuntu系统配置深度学习环境搭建
- 不断突破道，用道来挣钱才能长稳，才能心安！
- 计算机word实线边框在哪,word边框设置在哪 WORD中的边框设置在哪里
- win10+anaconda+pycharm python画图完整过程
- scratch学习相关资料汇总
- 大连理工版小学计算机教案,大连理工版小学信息技术教案
- 色彩平衡校正色彩的原理
- vulnhub之CengBox3
- 求斐波那契数列的第n项 java
- WiFi中AP和STA建立连接（Association）的过程
- 如何在Ubuntu上运行.Net5控制台程序