Как добавить текстовое поле к знаку символа

Я пытаюсь добавить текстовую метку к узлам в принудительном -layout на странице github vega.

Я преобразовал метку символа в метку группы и переместил часть «кодирования» в метку дочернего «символа». В этой новой групповой метке я теперь также добавляю текстовую метку, которой я даю имя узла.

Это отметка узлов, части «вкл» и «преобразование» опущены, потому что они не изменились.

{
      "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": [...]
    }

Ожидалось увидеть имя узла над каждым узлом, но текст И символ стали невидимыми.

Шаги по воспроизведению

  • Make the type "group", add a "marks" array, add a mark object with type "symbol" to this marks array
    • -> the nodes still show
  • Move the encode part to the nested symbol group
    • -> the nodes dissapear
  • Добавление текстовой метки также ничего не дает

У меня есть подозрение, что это свойство "field", которое срабатывает, когда вы пытаетесь вложить его, сохраняя данные в родительском элементе, потому что текстовая метка отображается в группе, когда я даю ему фиксированное значение, но я не могу разобрался, как заставить его работать. (Я думал, что это так, потому что в документах говорится, что дочерняя метка автоматически получает родительские данные при пропуске поля данных)


vega
person alazeo    schedule 10.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Внутри группы вы должны использовать {"parent": <field_name>} для ссылки на поле. Например, чтобы сослаться на поле «группа» в родительском, используйте:

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

Добавление следующий значок также работает, не нарушая перетягивания (пример ссылки):

person kanitw    schedule 11.01.2019
comment
@kanit любая идея, почему перетаскивание больше не работает с вашим примером? - person alazeo; 11.01.2019
comment
Смотрите пример . - person runeks; 11.03.2021

arrow_upward
0
arrow_downward

Эта текстовая метка использует метку symbol (называемую nodes) в качестве источника данных поддержки. См. https://vega.github.io/vega/docs/marks/#reactive-geometry.

    {
      "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"}
        }
      }
    }

Работает как шарм! В примере с вегой вы также можете перетаскивать узлы, и теперь это перестало работать. Есть идеи, почему это произошло? Большое спасибо.

person runeks    schedule 11.03.2021