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