D3.js 获取DOM元素值
7@TOC
前言
最近在用D3做数据标注系统的2D标注部分, 需要给每个2D标注绑定id
, 那么用下拉框形式展示所有id
, 但是选取的时候出了些问题.
下拉框仅为例, 不代表其他DOM元素不可用.
一、无法更改值
这个错误的原因是另一个逻辑, 因为要先选中一个2D标注, 然后下拉框选取它的id
, 那么如果当前2D标注已经有id
, 选中后下拉框值应该更改为这个id:
this.header.select('#header-id-list').attr('value', obj_track_id);
所以, 如果一个标注的id
是1007, 选中该标注后不论怎么选下拉框选项, 以下代码取到的id
都是1007:
const val = this.header.select('#header-id-list').attr('value');
因为使用attr
读写该属性, 这相当于增加了一个自定义属性在dom对象上, 虽然可以正常读写, 但是下拉框选取之后完全不会对该值产生影响, 故写入多少读取出来还是多少.
二、取值null
要先选中一个2D标注, 然后下拉框选取它的id
, 写个demo获取下拉框值:
<select name="header-id-list" id="header-id-list"><option value="1003">1003</option><option value="1006">1006</option><option value="1008">1008</option>
</select>
function regist() {d3.select('#header-id-list').on('click', function() {const val = d3.select('#header-id-list').attr('value');console.log(val);})
}regist();
这样获取出来是null;
三、解决方案
没找到什么好办法, 去看了下D3文档, 获取DOM值有两个API, 除了常用的attr()
, 还有一个"用于获取特殊属性值"的property()
, 试了一下可行:
function regist() {d3.select('#header-id-list').on('click', function() {const val = d3.select('#header-id-list').property('value');console.log(val);})
}regist();
总结
–