VEGA/DENEB：如何获取父组MyGroup的绝对X位置

我尝试获取父组"MyGroup"的绝对X位置，并将其显示在TextPrimary标记的text属性中。我已尝试多种方式（如使用item.mark.group或parent），但均未成功。请问是否有可行的实现方法？

原始Vega代码：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "MyData",
      "values": [
        {"name": "a", "width": 80, "height": 90},
        {"name": "b", "width": 40, "height": 60},
        {"name": "c", "width": 100, "height": 100}
      ]
    }
  ],
  "layout": {"padding": 10, "columns": 3, "bounds": "flush", "align": "each"},
  "marks": [
    {
      "type": "group",
      "name": "MyGroup",
      "from": {
        "facet": {
          "name": "MyFacet",
          "data": "MyData",
          "groupby": ["name", "width", "height"]
        }
      },
      "encode": {
        "update": {
          "width": {"field": "width"},
          "height": {"field": "height"},
          "fill": {"value": "lightgray"},
          "opacity": {"value": 1},
          "x": {"value": 0},
          "y": {"value": 0},
          "stroke": {"value": "blue"},
          "strokeWidth": {"value": 4}
        }
      },
      "marks": [
        {
          "name": "TextPrimary",
          "type": "text",
          "encode": {
            "update": {
              "y": {"value": 15},
              "x": {"value": 5},
              "text": {"signal": "'Missing X pos'"}
            }
          }
        }
      ]
    }
  ]
}

解决方案 #

要获取父组的绝对X位置，需要结合Vega的container()函数和组的自身位置属性。container(item)可获取标记所在的容器元素，将容器的x属性加上组自身的x值，就能得到绝对位置。

修改TextPrimary的text编码部分：

"text": {"signal": "format(container(item.mark.group).x + item.mark.group.x, '.2f')"}

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "MyData",
      "values": [
        {"name": "a", "width": 80, "height": 90},
        {"name": "b", "width": 40, "height": 60},
        {"name": "c", "width": 100, "height": 100}
      ]
    }
  ],
  "layout": {"padding": 10, "columns": 3, "bounds": "flush", "align": "each"},
  "marks": [
    {
      "type": "group",
      "name": "MyGroup",
      "from": {
        "facet": {
          "name": "MyFacet",
          "data": "MyData",
          "groupby": ["name", "width", "height"]
        }
      },
      "encode": {
        "update": {
          "width": {"field": "width"},
          "height": {"field": "height"},
          "fill": {"value": "lightgray"},
          "opacity": {"value": 1},
          "x": {"value": 0},
          "y": {"value": 0},
          "stroke": {"value": "blue"},
          "strokeWidth": {"value": 4}
        }
      },
      "marks": [
        {
          "name": "TextPrimary",
          "type": "text",
          "encode": {
            "update": {
              "y": {"value": 15},
              "x": {"value": 5},
              "text": {"signal": "format(container(item.mark.group).x + item.mark.group.x, '.2f')"}
            }
          }
        }
      ]
    }
  ]
}

format()函数用于让数值显示更整洁，你可以根据需求调整格式或直接移除，仅保留计算部分。

内容的提问来源于stack exchange，提问作者Southern