visualizationvega

Vega: access updated x and y of text after label transformation

I have three marks, one is a circle, the 2nd is a text which is transformed with label transformation, and I want to create a line between the circle and its corresponding label.

It is not clear to me how to access the updated coordinates of the label not the original one. I cannot seem to find it anywhere in the datum objects. I tried to use as in the transform and renamed y to y2, then the label positions were wrong.

Here is the gist: https://vega.github.io/editor/#/gist/7e20fcf83b561423ea6c783654bc28fc/labels-lines.vg.json

Thanks for the help!

Solution

  • Like this?

    enter image description here

    {
  "$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"
          }
        }
      }
    }
  ]
}