使用 react-vega 和 vega-lite 獲取點擊標記數據

Question

我有一個 vega-lite 圖表，想添加一個事件偵聽器來獲取 React 中的數據，但似乎無法弄清楚這一點。 具體來說，我試圖在 vega 圖表下方顯示一個表格，該表格取決於已單擊的標記的某些屬性。

這是規范的開頭：

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'}},
....

這是我獲得點擊點的最新嘗試（基於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}/>;

但是我得到了Cannot add invalid signal listener. Error: Unrecognized signal name: "click" Cannot add invalid signal listener. Error: Unrecognized signal name: "click"即使我定義了點擊信號。 任何幫助，將不勝感激; 我似乎無法在網上找到這樣的東西。

Answer 1

通過將我的 vega-lite 規范編譯為 vega 規范，然后添加有效的signals塊來切換到 vega。

Answer 2

看起來 vega-lite 不支持信號，因此解決方法是將信號添加到已編譯的規范中。

這個問題提供了一個很好的例子： 在 vega-lite 中實現自定義點擊處理程序的正確方法是什么