D3 실린더에 hover 추가
const svg: any = d3.select(this.$refs[ref])
.attr('width', this.width)
.attr('height', this.height);
svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
.attr('x', (d: any, i: number) => x(i))
.attr('y', (d: any) => y(d.value))
.attr('height', (d: any) => y(0) - y(d.value))
.attr('fill', (d: any, i: number) => {
if (difColor) {
return this.colorArr[i];
}
return this.colorArr[1];
})
.attr('width', x.bandwidth())
.on('mouseover', (data: any, index: any) => {
svg.append('text')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('text-anchor', 'middle')
.attr('class', 'divergence')
.attr('x', x(index)) // x
.attr('y', y(data.value)) // y
.attr('dx', '8px')
.text(data.value);
})
.on('mouseout', () => {
d3.selectAll('.divergence').remove();
});
참조 주소:https://wiki.jikexueyuan.com/project/d3wiki/interactive.html https://observablehq.com/@d3/horizontal-bar-chart https://observablehq.com/@d3/diverging-bar-chart
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
D3 학습: 파워 가이드 맵 레이아웃오늘 아침 에 일어나 서 알고리즘 을 복습 한 NPC 의 증명 에 따 르 면 머리 가 뜨 거 워 요. 아 기 는 지금 힘 이 좀 부 족 했 어 요. 도서관 에 가서 D3 를 배 웠 는데 꿈 쩍 도 하지 않 았 어 요...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
