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

Question

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

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

这是节点标记，"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": [...]
    }

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

重现步骤

创建类型"group"，添加一个"marks"数组，在这个标记数组中添加一个类型为"symbol"的标记对象
- -> 节点仍然显示
将编码部分移动到嵌套符号组
- -> 节点消失
添加文本标记也没有任何作用

我有一种预感，当您尝试嵌套它同时将数据保留在父级中时，它的 "field" 属性会很糟糕，因为当我给它时文本标记确实显示在组中一个固定值，但我似乎无法弄清楚如何让它工作。（我认为这是方式，因为文档说子标记在省略数据字段时会自动获取父数据）

Answer 1

在一个组内，必须使用{"parent": <field_name>}来引用一个字段。例如，要在父项中引用字段 "group" 使用：

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

查看示例 here。

Answer 2

添加以下标记也有效，不中断拖动(example link):

    {
      "type": "text",
      "from": {"data": "nodes"},
      "interactive": false,
      "enter": {
        "fill": {"value": "black"},
        "fontSize": {"value": 10}
      },
      "encode": {
        "update": {
          "y": {"field": "y", "offset": {"signal": "nodeRadius * -0.9"}},
          "x": {"field": "x"},
          "text": {"field": "datum.name"},
          "align": {"value": "center"}
        }
      }
    }

此文本标记使用 symbol 标记（称为 nodes）作为其支持数据源。参见 https://vega.github.io/vega/docs/marks/#reactive-geometry。

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

How to add a text field to a symbol mark

vega