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">1003option>
  <option value="1006">1006option>
  <option value="1008">1008option>
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();

---

总结

–