d3. js 상호작용 도표

d3js v 5.9.2 원생 JS 와 Jq 에 익숙 하 다 면 d3 의 상호작용 을 빨리 파악 할 수 있 습 니까? 아니면 완전한 기둥 그림 예 를 들 어 수정 할 수 있 습 니까? 완전한 기둥 그림
selection.on()
d3 selection. on () 을 통 해 요 소 를 이벤트 바 인 딩 하거나 제거 합 니 다. 사용 방법 은 간단 합 니 다. 예 를 들 어:

selection.on('click', function(){ 
    console.log(this)
})

function () {} 을 사용 해 야 this 대응 하 는 요 소 를 가리 키 는 용법 이 원생 JS 및 jq 와 거의 같 습 니 다.
막대 그래프 에 이벤트 바 인 딩
마우스 의 막대 그래프 색상 을 lightblue svg 로 바 꿉 니 다. 요소 속성의 우선 순 위 는 0 입 니 다. 이전 demo 를 편리 하 게 하기 위해 class 이름 을 추가 하여 사각형 스타일 을 바 꿉 니 다.

.selected-rect{
    fill: lightblue
}

js 코드 는 다음 과 같 습 니 다.

barContainer.append('rect')
    .attr('height', d => barScale(d))
    .attr('width', barWidth - 1)
    .on('mouseover', function () {
        d3.select(this) //    
            .attr('class', 'selected-rect'); //  class    
    })
    .on('mouseout', function () {
        d3.select(this)
            .attr('class', null);
    });

총결산
간단 하 죠? 할 말 이 없어 요. 주로 처음에 svg 스타일 의 우선 순 위 를 모 르 고 자 료 를 찾 아 봤 는데 우선 순위 의 가중치 가 0 이 라 고 생각 하지 못 했 어 요.
참고 자료
대화 식 조작 Handling Events Presentation attributes