Vega 可视化 - 如何在使用 vega 视图时启用操作

Question

我在我的 django 项目中使用 vega 图表。 到目前为止，我一直使用 vegaEmbed 在 web 页面上显示图表，但现在我想切换到 vega 视图，但在任何地方都找不到如何在使用 vega 视图时启用操作。

这是我的 vegaEmbed 代码：

    `<script>
      var {{ c.ident }} = {{ c.jSon|safe }}
          var {{ c.ident }}_opt = {
                  actions: true
                }
          vegaEmbed('#{{ c.ident }}', {{ c.ident }}, {{ c.ident }}_opt);
        vegaEmbed('#{{ c.ident }}', {{ c.ident }});
    </script>`

这段代码带有 vega 视图：

        `<script>
            var vegaJson = {{ jSon|safe }};
            var view = new vega.View(vega.parse(vegaJson))
                    .renderer('svg')  
                    .initialize('#chartDiv') 
                    .hover()             
                    .run();

            window.onresize = function (event) {
              view.signal('width', event.target.innerWidth - 200)
                  .signal('height', event.target.innerHeight - 450)
                  .run('enter');
            }
        </script>`

知道如何在使用 vega 视图时启用操作吗？

Answer 1

操作菜单不是由 vega 视图 API 定义的，它是在 vega-embed 中定义的。

以下是 vega-embed 如何创建操作菜单。

如果你想避免使用 Vega-Embed 并且你仍然想要一个类似于 Vega-Embed 实现的操作菜单，你将不得不在你的 vega 视图脚本中编写类似的代码。