如何同步降低Deneb/PowerBI中坐标轴与数据标签的密度？

是否可以像坐标轴通过labelOverlap设置处理标签那样，管理数据标签（text marks）的密度？理想状态下希望二者保持同步。

当前可视化效果 #

数据集 #

当前使用的Vega-Lite代码 #

{
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "Date",
      "type": "nominal",
      "axis": {"labelOverlap": true}
    },
    "y": {
      "aggregate": "sum",
      "field": "Sum of Value"
    }
  },
  "layer": [
    {"mark": {"type": "bar"}},
    {
      "mark": {
        "type": "text",
        "baseline": "top",
        "align": "left",
        "dx": 5,
        "dy": -3,
        "fontSize": 9,
        "angle": 270
      },
      "encoding": {
        "text": {"field": "Sum of Value"}
      }
    }
  ]
}

解决方案 #

Vega-Lite本身没有给Text Mark提供和坐标轴labelOverlap完全对应的自动密度控制，但可以通过以下几种方式实现类似效果，保证两者同步：

• 联动坐标轴标签的可见性
  可以通过Vega的信号捕获坐标轴当前显示的标签，再过滤数据标签只显示对应项，确保两者完全同步。修改后的代码如下：

  {
    "data": {"name": "dataset"},
    "signals": [
      {
        "name": "xAxisVisibleLabels",
        "update": "scale('x').labels()"
      }
    ],
    "transform": [
      {
        "filter": "xAxisVisibleLabels.includes(datum.Date)"
      }
    ],
    "encoding": {
      "x": {
        "field": "Date",
        "type": "nominal",
        "axis": {"labelOverlap": true}
      },
      "y": {
        "aggregate": "sum",
        "field": "Sum of Value"
      }
    },
    "layer": [
      {"mark": {"type": "bar"}},
      {
        "mark": {
          "type": "text",
          "baseline": "top",
          "align": "left",
          "dx": 5,
          "dy": -3,
          "fontSize": 9,
          "angle": 270
        },
        "encoding": {
          "text": {"field": "Sum of Value"}
        }
      }
    ]
  }
  

• 手动设置显示间隔
  如果坐标轴标签是按固定间隔隐藏的，直接给数据标签设置相同的过滤规则即可。比如每2个显示一个：

  {
    "data": {"name": "dataset"},
    "transform": [
      {
        "window": [{"op": "row_number", "as": "rowIdx"}],
        "frame": [0, 0]
      },
      {
        "filter": "datum.rowIdx % 2 === 0" // 间隔数和坐标轴保持一致
      }
    ],
    "encoding": {
      "x": {
        "field": "Date",
        "type": "nominal",
        "axis": {"labelOverlap": true}
      },
      "y": {
        "aggregate": "sum",
        "field": "Sum of Value"
      }
    },
    "layer": [
      {"mark": {"type": "bar"}},
      {
        "mark": {
          "type": "text",
          "baseline": "top",
          "align": "left",
          "dx": 5,
          "dy": -3,
          "fontSize": 9,
          "angle": 270
        },
        "encoding": {
          "text": {"field": "Sum of Value"}
        }
      }
    ]
  }
  

• 自定义Vega布局逻辑
  要是需要更复杂的碰撞检测，可以直接用Vega编写自定义逻辑，但这需要对Vega语法有更深的了解，适合高度定制的场景。

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