如何向标记添加可点击的超链接？

Question

有没有人有一个工作示例，说明如何将标记（即符号/形状）制作成可点击的对象，以在新的浏览器选项卡中启动网址？该功能似乎存在于 vega-lite 上，但 vega 上不存在？

我在 2015 年的第 315 期问题上看到，拉取请求已合并到 master 中，以便能够为 Vega 可视化中的标记添加可点击的超链接/href。但是，我在 Vega 文档中找不到任何对此的引用，也找不到任何有效的在线示例。

这个功能到底是没有实现还是文档没有更新？

问题#315： https://github.com/vega/vega/issues/315

如果事实证明文档不是最新的，我会将此问题中的操作转化为存储库上的问题以更新文档。

Answer 1

向标记的更新编码添加 href。

编辑器链接。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28, "link": "http://www.google.com"},
        {"category": "B", "amount": 55, "link": "http://www.google.com"},
        {"category": "C", "amount": 43, "link": "http://www.google.com"},
        {"category": "D", "amount": 91, "link": "http://www.google.com"},
        {"category": "E", "amount": 81, "link": "http://www.google.com"},
        {"category": "F", "amount": 53, "link": "http://www.google.com"},
        {"category": "G", "amount": 19, "link": "http://www.google.com"},
        {"category": "H", "amount": 87, "link": "http://www.google.com"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "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}
        },
        "update": {
          "fill": {"value": "steelblue"},
          "href": {"signal": "datum.link"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {"fillOpacity": [{"value": 1}]}
      }
    }
  ]
}