D3.js 获取DOM元素值

白瑕

已于 2024-09-07 20:28:55 修改

阅读量684

点赞数

分类专栏：又写Bug呢? D3.js 文章标签： javascript 前端开发语言

于 2023-04-12 11:11:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52697994/article/details/130101804

版权

又写Bug呢? 同时被 2 个专栏收录

22 篇文章

订阅专栏

D3.js

1 篇文章

订阅专栏

在D3中创建数据标注系统时遇到问题，当尝试用下拉框绑定2D标注的id并更新值时，发现无法更改已有的id。错误在于使用`attr(value)`读写下拉框的值，而应使用`property(value)`来正确获取或设置选中的值。通过修改为`property()`方法，成功解决了选取id后无法正确更新的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、无法更改值
二、取值null
三、解决方案
总结

前言

最近在用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();

总结

–