主页 / coding / 问题 / 79573869
Accepted
spaghettidave
Asked: 2025-04-15 03:17:39 +0800 CST

限制 deneb/vega 中的文本标记位于另一个标记内

  • 772

考虑这个例子（这里有更多Vega 编辑器中的示例数据）

{
  "$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-01T18:07:31",
        "JobNum": "JN001",
        "Assigned_To": "Bob",
        "Midpoint": "2023-01-01T16:37:31"
    }
]    
  },
  "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"
      },
      "encoding": {
        "y": {
          "field": "Assigned_To",
          "type": "nominal"
        },
        "x": {
          "field": "Midpoint",
          "type": "temporal"
        },
        "text": {
          "field": "JobNum",
          "type": "nominal"
        }
      }
    }
  ]
}

目前我正在使用作业开始/结束的中点将每个条形中的文本标记居中，但我无法找到将文本标记限制为条形大小的方法（即，如果持续时间很短，我不应该看到文本溢出条形）

json

1 个回答

  1. Best Answer

    一个可以探索的途径是通过表达式来设置text mark's limit property以匹配测量的距离JobEnd- JobBeg，如果超过该长度，它将用省略号截断，例如：

    {
  ...
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "limit": {
          "expr": "scale('x', datum['JobEnd']) - scale('x', datum['JobBeg'])"
        }
      },
      ...
    }
  ...
}

    Vega 编辑器（第 116-118 行）

    如果您不想看到标记或其他类似属性，您也可以使用此方法来设置它的不透明度，而不是截断它。

    这里的另一个挑战是，无论采用哪种方法，某些标记位置都会重叠，仍然会导致渲染伪影，这在链接的示例中仍然可以看到。您可能需要设计一种避免技术，例如计算不同的baseline值来抵消它们（或者，更彻底地，考虑使用 Vega 和标签变换）。

    • 1

相关问题