如何用Vega-Lite实现Power BI散点图的对称阴影效果？

核心实现逻辑 #

Power BI的散点图对称阴影，本质是基于原散点数据，生成关于指定对称轴的镜像点集，再将原数据点与镜像点拼接成闭合多边形区域，填充半透明颜色形成阴影。默认场景下，对称轴为y=x直线，也可根据需求自定义任意直线。

坐标生成算法步骤 #

1. 确定对称轴：
   • 默认取y=x（即x - y = 0），若需自定义直线，用通用直线公式Ax + By + C = 0表示。
2. 计算镜像点坐标：
   • 针对y=x轴：任意点(x0, y0)的镜像点为(y0, x0)。
   • 针对自定义直线Ax + By + C = 0，镜像点(x', y')计算公式：

     x' = x0 - 2*A*(A*x0 + B*y0 + C)/(A² + B²)
     y' = y0 - 2*B*(A*x0 + B*y0 + C)/(A² + B²)
     

3. 构建闭合阴影路径：
   • 将原数据点按x/y值排序，得到有序点列P1, P2, ..., Pn
   • 生成对应镜像点列P1', P2', ..., Pn'
   • 拼接路径：P1 → P2 → ... → Pn → Pn' → ... → P2' → P1，形成闭合多边形区域。

Vega-Lite实现示例 #

基于你提供的散点图代码，通过数据变换生成镜像点，用area标记绘制阴影：

{
  "width": 600,
  "height": 600,
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"ID": "I", "xVal": 3, "yVal": 2},
      {"ID": "I", "xVal": 4, "yVal": 6},
      {"ID": "II", "xVal": 3, "yVal": 3}
    ]
  },
  "transform": [
    // 生成y=x轴的镜像点
    {"calculate": "datum.yVal", "as": "mirrorX"},
    {"calculate": "datum.xVal", "as": "mirrorY"},
    // 合并原数据与镜像数据
    {"fold": ["original", "mirror"], "as": ["type", "coords"]},
    {"calculate": "datum.type === 'original' ? datum.xVal : datum.mirrorX", "as": "x"},
    {"calculate": "datum.type === 'original' ? datum.yVal : datum.mirrorY", "as": "y"},
    // 分组排序，确保路径闭合逻辑正确
    {"window": [{"op": "row_number", "as": "row"}], "groupby": ["ID", "type"]},
    {"calculate": "datum.type === 'mirror' ? (3 - datum.row) : datum.row", "as": "sortKey"}
  ],
  "layer": [
    // 绘制对称阴影区域
    {
      "mark": {"type": "area", "opacity": 0.2, "fill": "#888"},
      "encoding": {
        "x": {"field": "x", "type": "quantitative", "scale": {"domain": [0, 7]}},
        "y": {"field": "y", "type": "quantitative", "scale": {"domain": [0, 7]}},
        "order": {"field": "sortKey"},
        "color": {"field": "ID", "legend": false}
      }
    },
    // 绘制原散点
    {
      "mark": {"type": "circle", "size": 100},
      "encoding": {
        "x": {"field": "xVal", "type": "quantitative", "scale": {"domain": [0, 7]}},
        "y": {"field": "yVal", "type": "quantitative", "scale": {"domain": [0, 7]}},
        "color": {"field": "ID"}
      }
    }
  ]
}

关键细节说明 #

• 数据变换：通过fold合并原数据与镜像数据，用排序键保证阴影区域的路径是闭合且连续的多边形。
• 层绘制顺序：先绘制阴影（降低透明度），再绘制散点，确保散点显示在阴影上方。
• 自定义轴适配：若需更换对称轴，只需修改mirrorX和mirrorY的计算逻辑，替换为对应镜像点公式即可。

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