Vega图表添加图片提示框：D3开发者寻求实现方案

嘿，这个需求在Vega里完全能搞定！我给你基于官方的条形图示例一步步拆解修改：

1. 更新数据源 #

先把你新增的image_url字段加入到数据集里，修改后的data部分如下：

"data": [
  {
    "name": "table",
    "values": [
      {"category": "A", "amount": 28, "image_url": "http://www.mywebsite.com/myimage.png"},
      {"category": "B", "amount": 55, "image_url": "http://www.mywebsite.com/myimage2.png"},
      {"category": "C", "amount": 43, "image_url": "http://www.mywebsite.com/myimage3.png"},
      {"category": "D", "amount": 91, "image_url": "http://www.mywebsite.com/myimage4.png"},
      {"category": "E", "amount": 81, "image_url": "http://www.mywebsite.com/myimage5.png"},
      {"category": "F", "amount": 53, "image_url": "http://www.mywebsite.com/myimage6.png"},
      {"category": "G", "amount": 19, "image_url": "http://www.mywebsite.com/myimage7.png"}
    ]
  }
]

2. 配置带图片的Tooltip #

Vega支持Tooltip渲染HTML内容，我们只需要在条形的mark配置里，把tooltip设置为包含图片标签的HTML模板，同时开启HTML支持。

修改原来的bar mark部分，重点更新tooltip配置：

"marks": [
  {
    "name": "bars",
    "type": "rect",
    "from": {"data": "table"},
    "encode": {
      "enter": {
        "x": {"scale": "xscale", "field": "category"},
        "width": {"scale": "xscale", "band": 1},
        "y": {"scale": "yscale", "field": "amount"},
        "y2": {"scale": "yscale", "value": 0},
        "fill": {"value": "#4c78a8"}
      },
      "update": {
        "fillOpacity": {"value": 1}
      },
      "hover": {
        "fillOpacity": {"value": 0.5}
      }
    },
    // 核心Tooltip配置
    "tooltip": {
      "html": true,
      "content": {
        "signal": "<div style='padding: 8px;'><img src=\"" + datum.image_url + "\" style='width: 60px; height: 60px; object-fit: cover; margin-bottom: 8px;'/><br/><strong>分类:</strong> " + datum.category + "<br/><strong>数值:</strong> " + datum.amount + "</div>"
      }
    }
  }
]

3. 全局开启HTML Tooltip（可选） #

如果你的图表里有多个需要HTML Tooltip的元素，也可以在全局config里统一设置，省去每个mark单独加html: true的步骤：

"config": {
  "tooltip": {
    "html": true
  }
}

小提醒 #

• 确保你的图片URL是可访问的，如果是跨域图片，需要目标服务器开启CORS，否则浏览器会阻止加载。
• 可以通过调整HTML里的style自定义Tooltip样式，比如修改图片大小、文字间距等。

这样修改后，鼠标悬停在条形上时，就能看到包含对应图片的Tooltip啦！

内容的提问来源于stack exchange，提问作者Bmil