如何在Vega文本框中动态显示数据的text列内容？

问题需求 #

需要构建带有动态文本的文本框，现有Vega代码中的文本为固定值，需将其替换为从数据集的text列读取的动态内容。

修改思路 #

要实现动态文本绑定，需完成两个核心调整：

• 为文本标记关联指定数据源
• 将固定文本值替换为数据字段引用

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": "none",
  "width": 170,
  "height": 80,
  "padding": 10,

  "data": {
    "name": "daten",
    "values": [
      {"c1": "1", "c2": "2", "text": "TextboxText01"},
      {"c1": "1", "c2": "2", "text": "TextboxText02"}
    ]
  },

  "marks": [  
    {"type": "text",
      "data": "daten",
      "encode": {
        "enter": {
          "x": {"value": 80},
          "y": {"value": 20},
          "dx": {"value": 0},
          "text": {"field": "text"},
          "align": {"value": "center"},
          "fontSize": {"value": 14}
        }
      }
    },
    {"type": "text",
      "data": "daten",
      "encode": {
        "enter": {
          "x": {"value": 80},
          "y": {"value": 60},
          "dx": {"value": 0},
          "text": {"field": "text"},
          "align": {"value": "center"},
          "fontSize": {"value": 14}
        }
      }
    }
  ]
}

关键修改点说明 #

• 关联数据源：在每个text类型的标记中添加"data": "daten"，指定该标记使用名为daten的数据集
• 绑定动态文本：将text属性的value固定值替换为"field": "text"，表示从数据集中读取text字段的内容
• 修正语法错误：移除了原数据数组中最后一个条目后的多余逗号，避免JSON语法报错

若需两行显示不同文本，只需修改data.values中对应条目的text值即可。

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