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.
通过将我的 vega-lite 规范编译为 vega 规范,然后添加有效的signals
块来切换到 vega。
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.