Question

我正在尝试在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": [...]
    }

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

复制步骤

使类型为“ group”，添加一个“ marks”数组，向该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。

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

2 个答案: