散点图可以看到数据的离散和集中程度，但是具体到某个数据点的值往往难以获取，这时候可以添加一个交互，当鼠标悬停到特定的数据点时，弹出 tooltip 提示框来显示该数据点的具体信息。

最简单的方法是在 SVG 元素（一般数据点采用 <circle> 元素来绘制）内 添加 <title> 元素 ，这就类似为 <img> 元素添加 alt 属性。这样当鼠标悬停在数据点上，就会显示一个浏览器默认的提示框。

⚙️ 代码具体演示效果可以查看这个 Codepen

⚠️ 此外 <title> 只能在含有 fill 属性（属性值不能为 none ）的图形元素内，才能够显示 tooltip，所以还需要在散点图的点 <circle> 元素添加 fill 属性

const pointsContainer = svg
  .append("g")
  .attr("fill", "steelblue") // 为数据点设置填充色
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5);
以下是实现 tooltip 的核心代码
 * 为数据点添加 tooltip 提示框
// 通过在 <circle> 内添加 <title> 元素实现鼠标悬浮时显示提示框
pointsContainer.selectAll('circle')
  .append('title') // 在 <circle> 元素内添加一个 <title> 元素
  .text((d) => { // 入参数据继承自父级 <circle> 所绑定的数据
    return `mpg: ${X[d]}, hp: ${Y[d]}` // 设置 tooltip 内容
// 同时也在标注元素 <text> 内添加 <title> 元素，也可以实现鼠标悬浮时显示提示框
labelsContainer.selectAll("text")
  .append('title')
  .text((d) => {
    return `mpg: ${X[d]}, hp: ${Y[d]}`
💡 但是通过 <title> 元素设置的提示框内容只能是字符串，而且提示框也没有什么样式修饰。如果希望展示一个具有丰富内容和样式的提示框，则可以「自制」一个提示框，可以参考这个例子（借助 popper.js 和 Tippy.js 框架构建出 tooltip）。
  
分类：
 前端
 
标签：
 
数据可视化d3.js
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    Benbinbin