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或class选择并填充它。

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