d3. js 상호작용 도표
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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
