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

最新推荐文章于 2023-09-12 15:53:35 发布

weixin_33928137

最新推荐文章于 2023-09-12 15:53:35 发布

阅读量5.6k

点赞数 5

CC 4.0 BY-SA版权

文章标签： r语言

原文链接：https://juejin.im/post/5b62b01de51d4519634fffac

本文介绍了一种使用D3.js实现鼠标悬停时显示提示信息的方法。通过定义一个可移动的tooltip，并结合SVG元素上的鼠标事件，实现了鼠标指向位置的文字提示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

解决方法：

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 或者... 上加上鼠标事件

let circles = svg.selectAll('circle')
        .data(self.arr)
        .enter()
        .append('circle')
        .attr('cx', (d) => {
          return padding.left + xScale(d[0])
        })
        .attr('cy', (d) => {
          return padding.bottom + yScale(d[1])
        })
        .attr('r', self.radius)
        .on('mouseover', function (d, i) {
          return tooltip.style('visibility', 'visible').text(d[2])
        })
        .on('mousemove', function (d, i) {
          return tooltip.style('top', (event.pageY-10)+'px').style('left',(event.pageX+10)+'px')
        })
        .on('mouseout', function (d, i) {
          return tooltip.style('visibility', 'hidden')
        })
复制代码