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

Question

有没有人有关于如何在新浏览器选项卡中启动 url 的可点击对象中制作标记（即 symbol/shape）的工作示例？该功能似乎存在于 vega-lite 上，但不存在于 vega 上？

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

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

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

如果发现文档不是最新的，我会将此问题中的操作转换为回购协议中的问题以更新文档。

Answer 1

为标记的更新编码添加一个 href。

Editor link.

{
  "$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}]}
      }
    }
  ]
}

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

How do you add a clickable hyperlink to a mark?

vega