【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('属性名') 获取；