如何跟随使点和文本跟随鼠标？

Question

为了了解事件在 VEGA 中的工作原理，我给自己做了一个简单的练习，在给定视图中渲染位于光标坐标上的点和文本。

我设法使符号跟随鼠标坐标，但是当我尝试使两种类型的标记（文本和符号）跟随鼠标时，它不会同时渲染它们，而是第一个出现在标记中[ ] 数组。

有什么想法吗？

练习中使用了以下规范：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 600,
  "signals": [
    {
      "name": "position",
      "on": [
        {
          "events": {
            "type": "mousemove"
          },
          "update": "xy()"
        }
      ]
    },
    {
      "name": "positionDot",
      "on": [
        {
          "events": {
            "type": "mousemove"
          },
          "update": "xy()"
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "fill": {
            "value": "#000"
          },
          "text": {
            "value": "Text Label"
          }
        },
        "update": {
          "opacity": {
            "value": 1
          },
          "x": {
            "signal": "position[0]+20"
          },
          "y": {
            "signal": "position[1]+20"
          },
          "fontSize": {
            "value": 50
          }
        }
      }
    },
    {
      "name": "dot",
      "type": "symbol",
      "encode": {
        "enter": {
          "fill": {
            "value": "#939597"
          },
          "stroke": {
            "value": "#652c90"
          },
          "x": {
            "value": 0
          },
          "y": {
            "value": 0
          }
        },
        "update": {
          "x": {
            "signal": "positionDot[0]"
          },
          "y": {
            "signal": "position[1]"
          },
          "size": {
            "value": 550
          },
          "opacity": {
            "value": 1
          }
        },
        "hover": {
          "opacity": {
            "value": 0.5
          }
        }
      }
    }
  ]
}

https://vega.github.io/editor/#/gist/1dcd1034a1d8139b3de49f041ed1ed4b/spec.json

Answer 1

如果初始值（使用“init”或“value”）包含在信号 position:

中，您的示例将按预期工作

"signals": [
{
  "name": "position",
  "init": [0, 0],
  "on": [
    {
      "events": {
        "type": "mousemove"
      },
      "update": "xy()"
    }
  ]
},

View in Vega online editor

如何跟随使点和文本跟随鼠标？

How to follow make a dot and text follow a mouse?

vega