d3.js - 我们可以将事件监听器添加到 "Vega-Lite"规范吗？

Question

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

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

Answer 1

如果您使用 Vega-Embed ，它返回一个包含对 View 的引用的 promise ，该 View 允许您使用 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)
    })
})