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

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

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

解决方法:

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')
        })
复制代码

效果如下:



是的,你可以使用d3.js库来创建一个折线图,并且在鼠标移动到图表上的特定位置时显示相应的横坐标和纵坐标的内容。这可以通过以下步骤实现: 1. 创建一个SVG元素,并将其添加到文档中。 2. 使用d3.js的比例尺函数,将数据的值映射到图表的坐标系中。 3. 使用d3.js的线段函数,将数据连接起来并绘制折线图。 4. 添加一个“mouseover”事件监听器,以便在鼠标移动到折线图上时触发。 5. 在事件处理程序中,使用d3.js的“d3.event”对象获取鼠标的坐标,并使用比例尺函数将其转换为数据的值。 6. 将数据的值显示在图表上,可以使用d3.js的“text”函数创建一个文本元素,并将其添加到SVG元素中。 7. 当鼠标移出折线图时,使用d3.js的“mouseout”事件监听器将文本元素删除。 下面是一个示例代码片段,展示了如何在d3.js中创建一个折线图,并在鼠标移动到图表上时显示相应的坐标内容: ```javascript // 创建SVG元素 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); // 创建比例尺 var xScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.x; })]) .range([padding, width - padding]); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.y; })]) .range([height - padding, padding]); // 创建线段 var line = d3.line() .x(function(d) { return xScale(d.x); }) .y(function(d) { return yScale(d.y); }); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); // 创建鼠标事件监听器 svg.on("mouseover", function() { var mouseX = d3.event.offsetX; var mouseY = d3.event.offsetY; // 将鼠标坐标转换为数据的值 var xValue = xScale.invert(mouseX); var yValue = yScale.invert(mouseY); // 在SVG元素中添加文本元素来显示坐标内容 svg.append("text") .attr("class", "tooltip") .attr("x", mouseX) .attr("y", mouseY) .text("(" + xValue + ", " + yValue + ")"); }) .on("mouseout", function() { // 移除文本元素 svg.select(".tooltip").remove(); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值