我们可以将事件侦听器添加到“Vega-Lite”规范吗？答案

【问题标题】：Can we add event listeners to "Vega-Lite" specification?我们可以将事件侦听器添加到“Vega-Lite”规范吗？
【发布时间】：2016-02-09 19:49:12
【问题描述】：

我是 Vega 和 Vega-Lite 的新手。我正在使用 Vega-Lite 创建一个简单的条形图，但我无法添加任何事件侦听器，例如“徘徊”。

我想悬停一个条并更改条的颜色。

【问题讨论】：

您没有提供任何代码。 SO 不是代码编写服务。看vega.github.io/vega-lite/docs/embed.html的结尾。 chart({el:"#vis"}) 是 view 和来自 vg.embed("#vis", embedSpec, function(error, result) {}; 的 result.view 您可以在其中使用任何 .on('event', fnctn) 侦听器。调用时，处理程序有 2 个参数，第二个是 item。您需要检查它以查看您是否确实可以使用它。 Full Vega 具有可指定的事件侦听器。
您没有在此处提供任何代码。我相信你可以使用 Vega-Lite API 来实现悬停效果。请参考Vega-Lite API reference

标签： d3.js data-visualization vega vega-lite

【解决方案1】：

如果您使用的是Vega-Embed，它会返回一个包含对允许您使用addEventListener - explained in the docs here 的视图的引用的承诺。

这是一个例子：

const width = 600
const color = blue
embed(element, {
    $schema: 'https://vega.github.io/schema/vega-lite/3.0.0-rc6.json',
    data: { 'values': data },
    mark: {
        type: 'line',
        color,
        point: {
            color,
        }
    },
    width,
    height: width / 2,
    encoding: {
        'x': {
            field: 'label',
            type: 'temporal',
        },
        'y': {
            field: 'value',
            type: 'quantitative',
        },
    }
}).then(({spec, view}) => {
    view.addEventListener('mouseover', function (event, item) {
        console.log(item.datum)
    })
})

【讨论】：