我们可以在"Vega-Lite"中添加事件监听器吗?规格?

问题描述

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

I am new to Vega and Vega-Lite. I am creating a simple bar chart using Vega-Lite but I am not able to add any event listeners e.g. "hover".

我想将鼠标悬停并更改其颜色.

I want to hover a bar and change the color of the bar.

推荐答案

如果您使用的是 Vega嵌入，它返回带有对视图的引用的Promise，该视图允许您使用addEventListener-在此处的文档中进行了解释.

If you're using Vega-Embed, it returns a promise with a reference to the view which allows you to use 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)
    })
})

这篇关于我们可以在"Vega-Lite"中添加事件监听器吗?规格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！