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

Question

我运行进入了一个微妙的 vega 更新行为，我希望得到你的帮助 --- 当我使用视图 API 更新视觉元素（例如画笔）的信号时，UI 似乎不会更新，直到我将鼠标移到 div --- 在笔记本中，这会造成不和谐的体验。有什么方法可以"eagerly"执行更新吗？

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

在 Vega 编辑器中具有以下规范

{
  "$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 之前，您会看到画笔不会更新。

Answer 1

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

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

vega won't update until the mouse has brushed over the div containing the chart

vega

vega-lite