javascript - Vega 图表上的图像工具提示

Question

我是一名 d3 开发人员，开始掌握 VEGA 图表。我想添加带有图像的工具提示 - 关于如何执行此操作的任何想法？

例如，在这个例子中：

https://vega.github.io/vega/examples/bar-chart/

假设数据中有一个带有 url 的额外变量：

  {"category": "A", "amount": 28, "image_url": "http://www.mywebsite.com/myimage.png"}

在 d3 中很容易做到，但在 Vega 中却不能完全解决。非常感谢所有帮助。

Answer 1

以防万一其他人遇到同样的情况，我找到了答案。

诀窍是访问 vegaEmbed 语句中的视图。

vegaEmbed('#vis', spec).then(function(result) {
     // access view as result.view
     var view = result.view;

     view.addEventListener('mouseover', function(event, item) {

           ////catch the data here:  item.datum.my_field_name.
           ////now you can select and populate your tooltip div

     });


}).catch(console.error);

一旦你有了这个，你可以在这个调用之外以正常的方式创建一个 div 工具提示，并使用 id 或类来选择和填充它。

当你知道怎么做时很容易！