在鼠标滑过包含图表的div之前,vega不会更新

时间:2019-12-09 19:49:45

标签: vega vega-lite

我遇到了微妙的维加更新行为,希望能对您有所帮助 ---当我使用视图API更新视觉元素(例如画笔)的信号时,直到我将鼠标移到div上,UI才出现更新---在笔记本中,这可以创造震撼的体验。有什么方法可以“急切地”执行更新?

您可以运行以下JSON并在控制台中运行以下脚本 重现我正在谈论的效果。谢谢!

在Vega Editor中具有以下规格

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Midas Generated Visualization of dataframe STATE_distribution",
  "selection": {
    "zoom": {
      "type": "interval",
      "bind": "scales",
      "translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
      "zoom": "wheel!"
    },
    "brush": {
      "type": "interval",
      "resolve": "union",
      "on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
      "translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
      "zoom": null,
      "encodings": ["x"]
    }
  },
  "data": {
    "values": [
      {"STATE": "AK", "count": 2, "is_overview": true},
      {"STATE": "RI", "count": 4, "is_overview": true},
      {"STATE": "WA", "count": 75, "is_overview": true},
      {"STATE": "WI", "count": 120, "is_overview": true},
      {"STATE": "WV", "count": 155, "is_overview": true},
      {"STATE": "WY", "count": 43, "is_overview": true}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "STATE", "type": "ordinal"},
    "y": {"field": "count", "type": "quantitative", "stack": null},
    "color": {
      "field": "is_overview",
      "type": "nominal",
      "scale": {"range": ["#003E6B", "#9FB3C8"], "domain": [false, true]},
      "legend": null
    },
    "opacity": {"value": 0.5}
  },
  "config": {}
}

然后将VEGA_DEBUG.view.signal("brush_x", [10, 100])粘贴到控制台中。您会看到,直到将鼠标移到包含图表的div上,画笔才会更新。

1 个答案:

答案 0 :(得分:0)

更新信号后,调用runAsync()以调用更新。您将鼠标悬停在视图上时看到的更新行为来自于Vega侦听悬停事件并调用更新的事实。