d3 鼠标移到点上显示相应的文字

d3 鼠标移到点上显示相应的文字

weixin_33928137 

背景：用过好几种鼠标移到点上显示相应的文字方法.但是最好用的还是接下来这种！

         可以根据你鼠标所指的位置 显示文字～

解决方法：

1.首先定义一个 tooltip

let tooltip = d3.select('body')
.append('div')
.style('position', 'absolute')
.style('z-index', '10')
.style('color', '#3497db')
.style('visibility', 'hidden') // 是否可见（一开始设置为隐藏）
.style('font-size', '12px')
.style('font-weight', 'bold')
.text('')

2.在circle rect 或者...  上加上鼠标事件

 

 

 

1. let circles = svg.selectAll('circle')

2. .data(self.arr)

3. .enter()

4. .append('circle')

5. .attr('cx', (d) => {

6. return padding.left + xScale(d[0])

7. })

8. .attr('cy', (d) => {

9. return padding.bottom + yScale(d[1])

10. })

11. .attr('r', self.radius)

12. .on('mouseover', function (d, i) {

13. return tooltip.style('visibility', 'visible').text(d[2])

14. })

15. .on('mousemove', function (d, i) {

16. return tooltip.style('top', (event.pageY-10)+'px').style('left',(event.pageX+10)+'px')

17. })

18. .on('mouseout', function (d, i) {

19. return tooltip.style('visibility', 'hidden')

20. })

21. 复制代码

 

效果如下：