在 vega-lite 中实现自定义点击处理程序的正确方法是啥
Posted
技术标签:
【中文标题】在 vega-lite 中实现自定义点击处理程序的正确方法是啥【英文标题】：What's the proper way to implement a custom click handler in vega-lite在 vega-lite 中实现自定义点击处理程序的正确方法是什么 【发布时间】：2020-01-02 13:43:47 【问题描述】：我似乎无法通过阅读文档来解决这个问题。
有没有办法为我的任何标记实现onClick 事件处理程序？
【问题讨论】：
【参考方案1】：我很难用 vega-lite 让补丁识别我想要点击事件的对象。所以相反，我只是添加了一个通用的 eventListener
vegaEmbed('#vis', spec,
).then(result =>
result.view.addEventListener('click', function(event, item)
console.log('CLICK', event, item);
);
).catch(console.warn);
项目对象包含数据。如果没有数据，您就知道点击不是在有用的位置。
https://vega.github.io/vega/docs/api/view/#view_addEventListener
【讨论】：
【参考方案2】：由于 Vega-Lite 尚不支持信号，您可以修补生成的 Vega。您可以将信号添加到已编译的 Vega 规范，然后通过 Vega 视图 API 添加信号侦听器。您可以在 Vega-Embed 中使用 patch 选项修补生成的 Vega。
<!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>
【讨论】：
为了对此进行扩展，addSignalListener 回调 can be a function of the event name AND the underlying value。通过将"barClick +1" 替换为"datum" 作为update 键的值，我能够访问以编程方式单击的数据。见codepen.io/stephenshank/pen/XWJpPxo。
+dominik 当我用这个编译我的 cljs 代码时，当我尝试渲染图表时得到Error: Unrecognized signal name: "barClick"。以上是关于在 vega-lite 中实现自定义点击处理程序的正确方法是啥的主要内容，如果未能解决你的问题，请参考以下文章