vega-lite 和 vuejs - 关闭工具提示

Question

我正在 Vue.js SPA 中使用 vega-lite 绘制条形图。 主数据层的编码部分如下所示：

encoding: {
    x: {field: 'word', type: 'ordinal', sort: '-count'},
    y: {field: 'count', type: 'quantitative'},
    tooltip: [{field: 'word'}, {field: 'count'}, {field: 'doc_count'}]
  }

…在更新图表的 Vue 组件方法中，我有这个：

vegaEmbed('#vis', spec)
   .then(({_spec, view}) => {
     view.addEventListener('click', function (event, item) {
       if (item) {  
          vueComponent.onWordClicked(item.datum.word);
          }
        })
      })

......为了完成所有这些，称之为：

onWordClicked(word) {
  this.$router.push({path: 'words', params: {word: word}});
}

所有这一切都完全按照我的预期工作：您在一个条形图上 hover，显示一个工具提示，您单击该条形图，您将被导航到 SPA 中的另一条路线。

但是……工具提示会一直显示在屏幕上，除非您导航回图表页面并在条形图上显示 hover，在这种情况下，可以重新调用工具提示，然后在鼠标移出时将其关闭。

当 Vue 路径发生变化时，关于如何使工具提示 go 消失的任何想法？ 我尝试过使用view.tooltip(...)方法，但怀疑这太过分了（我对默认的工具提示很满意），甚至可能无法解决我的问题。

谢谢。

Answer 1

因此，当路由更改时，触发工具提示的组件会被不同的组件替换。 你的组件的beforeDestroy和destroyed方法将被调用，你可以挂钩并清理任何应该清理的东西。

destroyed() { 
    // close the any open vega views. (dont know the specific of vega-embed)
}

如果一个组件清除了它对销毁的所有副作用，则可以将其称为行为良好的组件。 副作用可能是已设置的超时和间隔、已打开的弹出窗口和对话框等等。 如果您希望能够进行清理，则需要保存句柄，以便稍后关闭它们。 我将演示一个表现良好的时钟组件：

Vue.component("clock", {
    template: `
    <div>{{time}}</div>
    
`,
    data() {
        return {
            time: null
        }
    },
    mounted() {
        // save the handle this.interval so we can clear it later on.
        this.interval = setInterval(() => {
            var d = new Date;
            this.time = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        }, 750);
    },
    destroyed() {
        clearInterval(this.interval);
    }

});