7@ 목차
머리말
최근에는 데이터 라벨링 시스템의 2D 라벨링 부분으로 D3를 사용하고 있는데 각각의 2D 라벨을 바인딩해야 하므로 id드롭다운 박스 형태로 모두 표시되지만 id선택시 문제가 있다
. 드롭다운 상자는 예시일 뿐이며 사용할 수 없는 다른 DOM 요소를 나타내지는 않습니다.
1. 값은 변경할 수 없습니다.
이 오류의 원인은 또 다른 논리입니다. 먼저 2D 레이블을 선택한 다음 드롭다운 상자에서 선택해야 하고 id현재 2D 레이블이 이미 존재하는 경우 id드롭다운 상자의 값을 변경해야 하기 때문입니다. 선택 후 이 ID로:
this.header.select('#header-id-list').attr('value', obj_track_id);
따라서 레이블이 id1007인 경우 레이블을 선택한 후 드롭다운 상자 옵션을 선택하는 방법에 관계없이 다음 코드는 id1007을 가져옵니다.
const val = this.header.select('#header-id-list').attr('value');
이 속성을 읽고 쓰는 것이 사용되기 때문에 attrdom 객체에 커스텀 속성을 추가하는 것과 동일하며 정상적으로 읽고 쓸 수 있지만 드롭다운 상자를 선택한 후에는 값에 전혀 영향을 주지 않으므로 아직까지 쓴 그대로입니다. .
둘째, 값이 null입니다.
먼저 2D 레이블을 선택한 다음 드롭다운 상자에서 선택하고 id드롭다운 상자의 값을 가져오는 데모를 작성합니다.
<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로 얻습니다.
3. 솔루션
마땅한 방법이 없어서 D3 문서를 읽어보았는데 DOM 값을 얻기 위한 API가 두 가지가 있는데 흔히 사용하는 API 말고도 " attr()특수한 속성 값을 얻기 위해 사용하는" API도 있으니 한번 property()해보세요. 작동합니다.
function regist() {
d3.select('#header-id-list').on('click', function() {
const val = d3.select('#header-id-list').property('value');
console.log(val);
})
}
regist();
요약하다
–