如何将文本字段添加到符号标记
How to add a text field to a symbol mark
我正在尝试为 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" 属性 会很糟糕,因为当我给它时文本标记确实显示在组中一个固定值,但我似乎无法弄清楚如何让它工作。
(我认为这是方式,因为文档说子标记在省略数据字段时会自动获取父数据)
在一个组内,必须使用{"parent": <field_name>}
来引用一个字段。例如,要在父项中引用字段 "group" 使用:
"field": {"parent": "group"}}
查看示例 here。
添加以下标记也有效,不中断拖动(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。
我正在尝试为 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" 属性 会很糟糕,因为当我给它时文本标记确实显示在组中一个固定值,但我似乎无法弄清楚如何让它工作。 (我认为这是方式,因为文档说子标记在省略数据字段时会自动获取父数据)
在一个组内,必须使用{"parent": <field_name>}
来引用一个字段。例如,要在父项中引用字段 "group" 使用:
"field": {"parent": "group"}}
查看示例 here。
添加以下标记也有效,不中断拖动(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。