时间戳

首页 > 解决方案 > 如何将文本字段添加到符号标记

vega - 如何将文本字段添加到符号标记

问题描述

我正在尝试在vega 的 github 页面上的force-directed-layout示例中的节点上添加一个文本标记。

我将符号标记转换为组标记，并将“编码”部分移动到子“符号”标记。在这个新的组标记中，我现在还添加了一个文本标记，我给出了节点的名称。

这是节点标记，“on”和“transform”部分被省略，因为它们没有改变。

{
      "name": "nodes",
      "type": "group",
      "zindex": 1,
      "from": {
        "data": "node-data"
      },
      "marks": [
        {
          "type": "symbol",
          "encode": {
            "enter": {
              "fill": {
                "scale": "color",
                "field": "group"
              },
              "stroke": {
                "value": "white"
              }
            },
            "update": {
              "size": {
                "signal": "2 * nodeRadius * nodeRadius"
              },
              "cursor": {
                "value": "pointer"
              }
            }
          }
        },
        {
          "type": "text",
          "interactive": false,
          "encode": {
            "enter": {
              "fill": {
                "value": "black"
              },
              "fontSize": {
                "value": 12
              },
              "align": {
                "value": "center"
              },
              "text": {
                "field": "name"
              },
              "y": {
                "value": -5
              }
            }
          }
        }
      ],
      "on": [...],
      "transform": [...]
    }

期望看到每个节点上方的节点名称，但文本和符号变得不可见。

重现步骤

我有一种预感，当您尝试嵌套它同时将数据保留在父级中时，它的“字段”属性会失效，因为当我给它一个固定值时，文本标记确实显示在组中，但我似乎不能想出了如何让它工作。（我认为这是这种方式，因为文档说子标记在省略数据字段时会自动获取父数据）

标签： vega

解决方案

在一个组内，你必须使用{"parent": <field_name>}来引用一个字段。例如，要引用父级中的字段“组”，请使用：

"field": {"parent": "group"}}

请参阅此处的示例。

推荐阅读