使用 react-vega 和 vega-lite 获取点击标记数据

Question

I have a vega-lite chart and would like to add an event listener to get the data in React, but can't seem to figure this out. Specifically I'm trying to display a table below the vega chart that depends on some attributes of the mark that has been clicked.

Here's the beginning of the spec:

const spec = {
    width: 'container',
    height: 500,
    signals: [
        {
            name: 'click',
            value: 0,
            on: [{events: '*:mousedown', update: 'datum'}]
        }
    ],
    layer: [
        {
            mark: {type: 'point', filled: true, tooltip: {content: 'data'}},
....

And here is my latest attempt at getting the clicked point (based on https://github.com/vega/react-vega/tree/master/packages/react-vega#approach1-create-class-from-spec-then-get-a-react-class-to-use ):

const handleClick = (...args) => {
    console.log(args);
}
const signalListeners = { click: handleClick };
const vegaChart = <VegaLite spec={spec} data={data} signalListeners={signalListeners}/>;

However I'm getting Cannot add invalid signal listener. Error: Unrecognized signal name: "click" Cannot add invalid signal listener. Error: Unrecognized signal name: "click" even though I have the click signal defined. Any help would be appreciated; I can't seem to find anything like this online.

Answer 1

通过将我的 vega-lite 规范编译为 vega 规范，然后添加有效的signals块来切换到 vega。

Answer 2

Looks like vega-lite doesn't support signals, so the workaround is to add the signal to the compiled spec.

This question provides a good example: What's the proper way to implement a custom click handler in vega-lite