Vega：在标签转换后访问更新的文本 x 和 y

Question

我有三个标记，一个是圆圈，第二个是通过标签变换进行变换的文本，我想在圆圈与其对应的标签之间创建一条线。

我不清楚如何访问标签的更新坐标而不是原始坐标。我似乎无法在基准对象的任何地方找到它。我尝试在

as

中使用

transform

并将

y

重命名为

y2

，然后标签位置错误。

要点如下：https://vega.github.io/editor/#/gist/7e20fcf83b561423ea6c783654bc28fc/labels-lines.vg.json

感谢您的帮助！

Answer 1

像这样吗？

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "data": [
    {
      "name": "main",
      "values": [
        {"id": 1, "timestamp": 1643221757, "name": "name 1"},
        {"id": 2, "timestamp": 1643521757, "name": "name 2"},
        {"id": 3, "timestamp": 1643721757, "name": "name 3"}
      ]
    }
  ],
  "scales": [
    {
      "name": "timeScale",
      "domain": {"data": "main", "field": "timestamp"},
      "type": "time",
      "range": "width"
    }
  ],
  "axes": [
    {
      "scale": "timeScale",
      "orient": "bottom",
      "offset": {"signal": "-height/2"}
    }
  ],
  "marks": [
    {
      "name": "datapoints",
      "from": {"data": "main"},
      "type": "symbol",
      "shape": "circle",
      "encode": {
        "update": {
          "x": {"scale": "timeScale", "field": "timestamp"},
          "y": {"signal": "height/2"}
        }
      }
    },
    {
      "name": "datalabels",
      "from": {"data": "datapoints"},
      "type": "text",
      "encode": {
        "update": {
          "text": {"signal": "datum.datum.name"},
          "x": {"field": "x"},
          "y": {"field": "y", "offset": -20}
        }
      },
      "transform": [
        {
          "type": "label",
          "avoidMarks": ["datapoints"],
          "padding": 30,
          "size": {"signal": "[width, height]"},
          "offset": [50]
        }
      ]
    },
    {
      "name": "line",
      "from": {"data": "datalabels"},
      "type": "rule",
      "encode": {
        "update": {
          "x": {
            "signal": "datum.x"
          },
          "y": {
            "signal": "datum.y"
          },
          "x2": {
            "signal": "datum.datum.x"
          },
          "y2": {
            "signal": "datum.datum.y"
          }
        }
      }
    }
  ]
}

Answer 2

如果我们想根据标准对文本进行颜色填充怎么办？我正在使用折线图和标签转换，但如果我在输入中输入填充，那么如果我将其放入更新中，文本就会消失，那么它不适用。仅当我给出红色、黑色、灰色等值时才有效。数据源具有类别，但用作颜色条件时没有任何作用。