如何在VegaLite中实现text mark的左/右浮动对齐

VegaLite 没有前端CSS语境下的浮动属性，但可以通过文本定位+对齐配置，直接实现文本贴齐各层级X轴起始/结束位置的效果，不需要额外的复杂兼容处理。

方案1：分层级贴齐分组X轴边界（适配多系列分层图表场景） #

针对多系列/分层级的条形图场景，按以下配置即可实现对应效果：

• 不要把文本标记的x通道直接绑定到原数值字段，而是按Y轴分层字段分组后，通过聚合计算每个分组下X轴字段的最小值（对应X轴起始位置）、最大值（对应X轴结束位置），作为文本的定位坐标
• 贴左边界的文本标记添加"align": "left"配置，同时给dx属性设置2-3像素的正偏移，避免文本紧贴坐标轴被裁切
• 贴右边界的文本标记添加"align": "right"配置，同时给dx属性设置-2到-3像素的负偏移，预留视觉边距

核心配置参考：

// 贴左边界文本图层
{
  "mark": {"type": "text", "align": "left", "dx": 3, "baseline": "middle"},
  "encoding": {
    "x": {"aggregate": "min", "field": "x_axis_value", "type": "quantitative"},
    "y": {"field": "y_level_field", "type": "nominal"},
    "text": {"field": "display_value"}
  }
},
// 贴右边界文本图层
{
  "mark": {"type": "text", "align": "right", "dx": -3, "baseline": "middle"},
  "encoding": {
    "x": {"aggregate": "max", "field": "x_axis_value", "type": "quantitative"},
    "y": {"field": "y_level_field", "type": "nominal"},
    "text": {"field": "display_value"}
  }
}

如果你的图表用了分面（facet）实现多层级X轴，只需要把分面字段加入编码通道，聚合逻辑会自动在每个分面区间内计算对应的X轴极值，不需要手动换算坐标。

方案2：全局边界固定文本（适配边界提示场景） #

如果你不需要逐行贴齐数值，只需要给整个图表添加左右侧的边界限制提示文本，可以通过图层叠加直接绑定绘图区尺寸信号实现：

• 左边界文本的x通道直接绑定数值0，对应绘图区最左侧
• 右边界文本的x通道直接绑定VegaLite内置的width信号，对应绘图区最右侧

核心配置参考：

{
  "layer": [
    // 此处保留原有的图表图层
    // 全局左边界提示文本
    {
      "mark": {"type": "text", "align": "left", "dx": 5, "dy": -12},
      "encoding": {
        "x": {"datum": 0},
        "text": {"datum": "自定义左边界提示内容"}
      }
    },
    // 全局右边界提示文本
    {
      "mark": {"type": "text", "align": "right", "dx": -5, "dy": -12},
      "encoding": {
        "x": {"signal": "width"},
        "text": {"datum": "自定义右边界提示内容"}
      }
    }
  ]
}

注意：如果你手动修改过X轴scale的域范围（比如加了内边距、自定义了最小/最大值），需要把文本的x坐标对应绑定到scale的实际域极值，避免文本和轴刻度错位。

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