vue+d3给svg上的dom元素添加toolTip

最新推荐文章于 2024-10-24 09:50:46 发布

Fauna.

最新推荐文章于 2024-10-24 09:50:46 发布

阅读量3.4k

点赞数

分类专栏：前端文章标签： d3 Vue

本文链接：https://blog.youkuaiyun.com/sunshine_Cherrie/article/details/93721570

版权

本文介绍了如何在使用Vue和D3绘制SVG图表时，为特定元素添加浮动提示（tooltip）。需求包括多条列表形式的提示信息、国际化动态调整提示宽度等。实现方法涉及Vue的数据绑定、事件监听以及CSS样式调整，通过动态修改tipClass来适应不同语言环境下的提示宽度。

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

1. 需求描述

使用d3绘制了一张svg图，现在需要对图上的元素添加浮动提示。
项目提示要求：

只针对某些元素添加浮动提示
可能有很多条提示信息，需要将他们成列表状显示
国际化时需要动态调整tip的宽度

2. 项目架构

这个前端项目使用的vuejs；绘制svg图使用的d3(emmmmm 可能大材小用，因为实际上需要画的东西非常简单，但是我不会别的啊嘻嘻嘻)

3. 实现方案

首先在html部分给浮动提示建一个div

    <div class="chartTooltip">
      <p>
        <br/><strong class="name"></strong>
      </p>
	</div>

js里给用d3创建的dom元素添加mouseover和mouseout事件来进行浮动tip的显示

     var nodeEnter = nodeUpdate.enter().append("g")
       .on("mouseover", d => {
         // 从d3.event获取鼠标的位置
         var transform = d3.event;
         var yPosition = transform.offsetY + 20;
         var xPosition = transform.offsetX + 20;
         // 将浮层位置设置为鼠标位置