如何在Vega中垂直对齐符号使其与Y轴标签及条形中心对齐？

可以通过调整符号标记的y轴位置计算，实现与条形的垂直居中对齐。具体修改如下：

关键修改点 #

• 移除冗余属性：符号标记不需要x2和height，直接删除这两项
• 计算垂直中心位置：将符号的y属性从直接绑定刻度，改为通过信号计算条形的垂直中心位置：scale('yscale', datum.Sector) + scale('yscale', null, 1) / 2
• 规范属性位置：将baseline属性移至enter编码块内（符号标记中该属性影响有限，但保持配置规范）

修改后的完整配置 #

{
  "data": [{"name": "dataset"}],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {
        "data": "dataset",
        "field": "Sector"
      },
      "range": "height",
      "padding": 0.1,
      "round": true
    },
    {
      "name": "xscale",
      "domain": {
        "data": "dataset",
        "field": "Position Weight"
      },
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {
      "scale": "xscale",
      "orient": "bottom",
      "title": "Position Weight"
    },
    {
      "orient": "left",
      "scale": "yscale",
      "title": "Sector"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {"signal": "datum"},
          "x": {"scale": "xscale", "field": "Position Weight"},
          "x2": {"scale": "xscale", "value": 0},
          "y": {"scale": "yscale", "field": "Sector"},
          "height": {"scale": "yscale", "band": 1},
          "opacity": {"value": 1}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "tooltip": {"signal": "datum"},
          "x": {"scale": "xscale", "field": "Record Count"},
          "y": {"signal": "scale('yscale', datum.Sector) + scale('yscale', null, 1) / 2"},
          "opacity": {"value": 1},
          "baseline": {"value": "middle"}
        },
        "update": {"fill": {"value": "red"}}
      }
    }
  ]
}

原理说明 #

scale('yscale', null, 1)会返回y轴band刻度的单个条带高度，将其除以2后加到条带的起始y位置上，就能得到条带的垂直中心坐标，从而让符号与条形垂直居中对齐。

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