Vega-Lite 动态标签宽度（反应几何）

Question

我正在创建一个时间线条形图，条形上有标签。目前，标签将超出栏并与其他标签重叠。我希望捕获条形的宽度，以便我可以使用它作为标签宽度限制来切断条形之外的任何内容。

维加代码

我确实在此网站上找到了一个可能可行的解决方案：https://forum.enterprisedna.co/t/deneb-limit-data-label-width/32850

不幸的是，他们没有解释完整的解决方案，我一直无法弄清楚。我不确定 concat_0_x 包含什么或如何重现它。我已经尝试过 Vega 文档的比例并寻找使用示例，但一直无法找到找到条形宽度的方法。

如果有人可以帮助填补上述解决方案中的空白或提供另一种获取条形宽度的方法，以便我可以将其用作宽度限制，我将不胜感激。

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "person": "Alice",
        "activity": "Traveling",
        "start": "2024-02-02T05:30:00",
        "end": "2024-02-02T06:30:00"
      },
      {
        "person": "Alice",
        "activity": "Working",
        "start": "2024-02-02T07:00:00",
        "end": "2024-02-02T12:00:00"
      },
      {
        "person": "Alice",
        "activity": "Lunch",
        "start": "2024-02-02T12:30:00",
        "end": "2024-02-02T13:00:00"
      },
      {
        "person": "Alice",
        "activity": "Breakdown",
        "start": "2024-02-02T14:00:00",
        "end": "2024-02-02T14:30:00"
      },
      {
        "person": "Bob",
        "activity": "Working",
        "start": "2024-02-02T06:00:00",
        "end": "2024-02-02T11:30:00"
      },
      {
        "person": "Bob",
        "activity": "Maintenance",
        "start": "2024-02-02T12:00:00",
        "end": "2024-02-02T13:30:00"
      },
      {
        "person": "Bob",
        "activity": "Pre-op",
        "start": "2024-02-02T14:00:00",
        "end": "2024-02-02T15:00:00"
      },
      {
        "person": "Charlie",
        "activity": "Working",
        "start": "2024-02-02T06:30:00",
        "end": "2024-02-02T11:00:00"
      },
      {
        "person": "Charlie",
        "activity": "Lunch",
        "start": "2024-02-02T11:30:00",
        "end": "2024-02-02T12:00:00"
      },
      {
        "person": "Charlie",
        "activity": "Breakdown",
        "start": "2024-02-02T14:30:00",
        "end": "2024-02-02T15:00:00"
      },
      {
        "person": "Alice",
        "activity": "Parked",
        "start": "2024-02-02T15:00:00",
        "end": "2024-02-02T17:00:00"
      },
      {
        "person": "Bob",
        "activity": "Parked",
        "start": "2024-02-02T15:00:00",
        "end": "2024-02-02T17:00:00"
      },
      {
        "person": "Charlie",
        "activity": "Parked",
        "start": "2024-02-02T15:00:00",
        "end": "2024-02-02T17:00:00"
      }
    ]
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "x": {
          "field": "start",
          "type": "temporal",
          "axis": {"title": "Timeline"}
        },
        "x2": {"field": "end"},
        "y": {
          "field": "person",
          "type": "nominal",
          "axis": {"title": "Persons"}
        },
        "color": {
          "field": "activity",
          "type": "nominal",
          "scale": {
            "domain": [
              "Traveling",
              "Working",
              "Lunch",
              "Breakdown",
              "Maintenance",
              "Pre-op",
              "Parked"
            ],
            "range": [
              "#1f77b4",
              "#ff7f0e",
              "#2ca02c",
              "#d62728",
              "#9467bd",
              "#8c564b",
              "#e377c2"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "transform": [
        {"calculate": "scale('layer_0_x', datum['end']) - scale('layer_0_x', datum['start'])", "as": "testLength"}
      ],
      "mark": {
        "type": "text",
        "align": "left",
        "dx": 3,
        "dy": 1,
        "baseline": "middle",
        "fontSize": 9,
        "limit": {"expr": "datum['testLength'] - 2"},
        "ellipsis": " ",
        "x": {"expr": "scale('layer_0_x',datum.start)"}
      },
      "encoding": {
        "text": {"field": "activity"},
        "y": {
          "field": "person",
          "type": "nominal",
          "axis": {"title": "Persons"}
        }
      }
    }
  ],
  "resolve": {"scale": {"x": "independent"}}
}