vega-lite - 在 vega-lite 中实现自定义点击处理程序的正确方法是什么

标签 vega-lite

我似乎无法通过阅读文档来弄清楚这一点。
有没有办法实现 onClick我的任何标记的事件处理程序?

最佳答案

由于 Vega-Lite 尚不支持信号,您可以修补生成的 Vega。您可以向已编译的 Vega 规范添加信号,然后通过 Vega View API 添加信号监听器。您可以使用 patch 修补生成的 Vega Vega-Embed 中的选项。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>
</head>

<body>  
  <div id="vis"></div>

  <script>
    const spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
      "data": {
        "values": [
          {"a": "A", "b": 28},
          {"a": "B", "b": 55},
          {"a": "C", "b": 43},
          {"a": "D", "b": 91},
          {"a": "E", "b": 81},
          {"a": "F", "b": 53},
          {"a": "G", "b": 19},
          {"a": "H", "b": 87},
          {"a": "I", "b": 52}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"}
      }
    };
    vegaEmbed('#vis', spec, {
      patch: (spec) => {
        spec.signals.push({
            "name": "barClick",
            "value": 0,
            "on": [{"events": "rect:mousedown", "update": "barClick + 1"}]
        })
        return spec;
      }
    }).then(result => {
        result.view.addSignalListener('barClick', console.log);
    }).catch(console.warn);
  </script>
</body>

关于vega-lite - 在 vega-lite 中实现自定义点击处理程序的正确方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57707494/

相关文章:

vega-lite - 在 VegaEmbed 中更新数据的最简单方法

python - 有没有办法用分箱数据反转 Altair 等值区域图的配色方案?

javascript - 如何使用 Vega/Vega-lite 呈现类/组织/流/状态图/图表

elasticsearch - Vega-lite热图将文本添加到变量

javascript - 使用 JSON 和 Vega-lite 在散点图上绘制多个点

vega-lite - 基于选择动态改变编码中的 Y 轴字段 Vega-Lite

python - 了解mark_line点叠加和图例之间的交互

python - Altair Ridgeline 不会创建标称组图

javascript - 在 Vega-Lite 中动态捕获枢轴变换后的值