如何在Deneb/Vega中限制文本标记在条形范围内

当条形图的任务时长过短时，居中的文本标记容易超出条形范围，这里提供两种实用解决方案：

方法一：启用文本裁剪 #

直接给文本标记添加clip属性，让超出条形区域的文本自动被裁剪，确保内容不会跑到条形外面。修改后的文本标记配置如下：

{
  "mark": {
    "type": "text",
    "align": "center",
    "baseline": "middle",
    "clip": true  // 新增裁剪属性
  },
  "encoding": {
    "y": {
      "field": "Assigned_To",
      "type": "nominal"
    },
    "x": {
      "field": "Midpoint",
      "type": "temporal"
    },
    "text": {
      "field": "JobNum",
      "type": "nominal"
    }
  }
}

方法二：动态调整文本位置 #

如果不想裁剪文本，可以通过数据转换计算文本的安全显示位置，结合任务时长阈值调整对齐方式，确保文本始终落在条形范围内。示例配置如下：

{
  "transform": [
    {
      "calculate": "datetime(datum.JobEnd).getTime() - datetime(datum.JobBeg).getTime()",
      "as": "Duration"
    },
    {
      "calculate": "datum.Duration < 3600000 ? 'left' : 'center'",  // 以1小时为阈值
      "as": "TextAlign"
    },
    {
      "calculate": "datum.Duration < 3600000 ? datum.JobBeg : datum.Midpoint",
      "as": "TextX"
    }
  ],
  "mark": {
    "type": "text",
    "baseline": "middle"
  },
  "encoding": {
    "y": {
      "field": "Assigned_To",
      "type": "nominal"
    },
    "x": {
      "field": "TextX",
      "type": "temporal"
    },
    "text": {
      "field": "JobNum",
      "type": "nominal"
    },
    "align": {"field": "TextAlign"}
  }
}

完整示例代码 #

以下是整合了方法一（裁剪）的完整配置，包含一个极短时长的测试任务：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {
    "name": "dataset",
    "values": [
      {
        "JobBeg": "2023-01-01T11:04:45",
        "JobEnd": "2023-01-01T18:04:45",
        "JobNum": "JN000",
        "Assigned_To": "David",
        "Midpoint": "2023-01-01T14:34:45"
      },
      {
        "JobBeg": "2023-01-01T15:07:31",
        "JobEnd": "2023-01-01T15:08:31",  // 极短时长任务
        "JobNum": "JN001",
        "Assigned_To": "Bob",
        "Midpoint": "2023-01-01T15:08:01"
      }
    ]    
  },
  "layer": [
    {
      "mark": {"type":"bar", "stroke":"black","strokeWidth":2},
      "encoding": {
        "y": {
          "field": "Assigned_To",
          "type": "nominal",
          "title": "Assigned To"
        },
        "x": {
          "field": "JobBeg",
          "type": "temporal",
          "title": "Start Time",
          "axis": {
            "interval": "day",
            "step": 1
          }
        },
        "x2": {
          "field": "JobEnd",
          "title": "End Time"
        },
        "tooltip": [
          {
            "field": "JobBeg",
            "type": "temporal",
            "title": "Start Time",
            "format": "%Y-%m-%d %H:%M"
          },
          {
            "field": "JobEnd",
            "type": "temporal",
            "title": "End Time",
            "format": "%Y-%m-%d %H:%M"
          },
          {
            "field": "JobNum",
            "type": "nominal"
          }
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "clip": true
      },
      "encoding": {
        "y": {
          "field": "Assigned_To",
          "type": "nominal"
        },
        "x": {
          "field": "Midpoint",
          "type": "temporal"
        },
        "text": {
          "field": "JobNum",
          "type": "nominal"
        }
      }
    }
  ]
}

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