修改Vega中符号标记的宽度
问题描述 投票：0回答：3
我想在我的 Vega 图中标记符号。有些标签很长，超出了我的符号的边界。如何扩展符号的宽度以处理长标签？
更新：有没有办法增加符号标记的宽度？
这是我的代码的链接。
N.B：我尝试使用矩形标记，其宽度更容易修改。但矩形标记的美观并不适合我的用例。我的用例是一个力变换力导向图。
3个回答
3
投票
投票
这是一个工作示例，使用 Vega 规范以及力变换和文本框，按照 David 的建议使用反应几何。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A node-link diagram with force-directed layout, depicting character co-occurrence in the novel Les Misérables.",
"width": 500,
"height": 200,
"autosize": "pad",
"signals": [
{
"name": "nodeRadius",
"value": 50,
"bind": {"input": "range", "min": 1, "max": 100, "step": 1}
},
{
"name": "nodeCharge",
"value": -100,
"bind": {"input": "range", "min": -100, "max": 10, "step": 1}
},
{
"name": "linkDistance",
"value": 66,
"bind": {"input": "range", "min": 5, "max": 100, "step": 1}
},
{
"name": "textPadding",
"value": 5,
"bind": {"input": "range", "min": 0, "max": 20, "step": 1}
},
{
"name": "cornerRadius",
"value": 10,
"bind": {"input": "range", "min": 0, "max": 20, "step": 1}
},
{ "name": "showSymbol", "value": false, "bind": {"input": "checkbox"} },
],
"data": [
{
"name": "node_data",
"values": [
{"name": "A Name", "type": "node", "1d": 0},
{"name": "A Very Long Name", "type": "node", "1d": 1}
]
},
{"name": "edge_data", "values": [{"source": 0, "target": 1}]}
],
"marks": [
{
"type": "symbol",
"name": "nodes",
"from": {"data": "node_data"},
"encode": {
"update": {
"fill": {"value": "grey"},
"opacity": {"signal": "showSymbol ? 0.5 : 0"},
"size": {"signal": "PI * nodeRadius * nodeRadius"},
"shape": {"value": "circle"}
}
},
"transform": [
{
"type": "force",
"iterations": 300,
"static": {"signal": "false"},
"signal": "force",
"forces": [
{
"force": "center",
"x": {"signal": "width/2"},
"y": {"signal": "height/2"}
},
{"force": "collide", "radius": {"signal": "nodeRadius"}},
{"force": "nbody", "strength": {"signal": "nodeCharge * 10"}},
{
"force": "link",
"links": "edge_data",
"distance": {"signal": "linkDistance"}
}
]
}
]
},
{
"type": "path",
"from": {"data": "edge_data"},
"interactive": false,
"encode": {
"update": {"stroke": {"value": "#ccc"}, "strokeWidth": {"value": 0.5}}
},
"transform": [
{
"type": "linkpath",
"require": {"signal": "force"},
"shape": "line",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
},
{
"type": "text",
"name": "textmark",
"from": {"data": "nodes"},
"interactive": false,
"encode": {
"enter": {"fill": {"value": "black"}, "fontSize": {"value": 16}},
"update": {
"y": {"field": "y", "offset": {"signal": "nodeRadius * -0.1"}},
"x": {"field": "x"},
"text": {"field": "datum.name"},
"align": {"value": "center"},
"baseline": {"value": "middle"}
}
},
"zindex": 1
},
{
"name": "rectmark",
"type": "rect",
"from": {"data": "textmark"},
"encode": {
"update": {
"x": {"field": "bounds.x1", "round": true, "offset": {"signal": "-textPadding"}},
"x2": {"field": "bounds.x2", "round": true, "offset": {"signal": "textPadding"}},
"y": {"field": "bounds.y1", "round": true, "offset": {"signal": "-textPadding"}},
"y2": {"field": "bounds.y2", "round": true, "offset": {"signal": "textPadding"}},
"cornerRadius": {"signal": "cornerRadius"},
"fill": {"value": "aliceblue"},
"stroke": {"value": "steelblue"}
}
}
}
]
}
0
投票
投票
不清楚你在问什么。您的意思是像这样静态增加符号的大小吗？
如果是这样，只需在 size 属性中输入一个值即可。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A node-link diagram with force-directed layout, depicting character co-occurrence in the novel Les Misérables.",
"width": 700,
"height": 500,
"autosize": "pad",
"signals": [
{
"name": "nodeRadius",
"value": 50,
"bind": {"input": "range", "min": 1, "max": 50, "step": 1}
},
{
"name": "nodeCharge",
"value": -100,
"bind": {"input": "range", "min": -100, "max": 10, "step": 1}
},
{
"name": "linkDistance",
"value": 66,
"bind": {"input": "range", "min": 5, "max": 100, "step": 1}
}
],
"data": [
{
"name": "node_data",
"values": [
{"name": "A Name", "type": "node", "1d": 0},
{"name": "A Very Long Name", "type": "node", "1d": 1}
]
},
{"name": "edge_data", "values": [{"source": 0, "target": 1}]}
],
"marks": [
{
"type": "symbol",
"name": "nodes",
"from": {"data": "node_data"},
"encode": {
"enter": {
"fill": {"value": "steelblue"},
"size": {"value": 10000},
"tooltip": {"field": "name"}
}
},
"transform": [
{
"type": "force",
"iterations": 300,
"static": {"signal": "false"},
"signal": "force",
"forces": [
{
"force": "center",
"x": {"signal": "width/2"},
"y": {"signal": "height/2"}
},
{"force": "collide", "radius": {"signal": "nodeRadius"}},
{"force": "nbody", "strength": {"signal": "nodeCharge * 10"}},
{
"force": "link",
"links": "edge_data",
"distance": {"signal": "linkDistance"}
}
]
}
]
},
{
"type": "path",
"from": {"data": "edge_data"},
"interactive": false,
"encode": {
"update": {"stroke": {"value": "#ccc"}, "strokeWidth": {"value": 0.5}}
},
"transform": [
{
"type": "linkpath",
"require": {"signal": "force"},
"shape": "line",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
},
{
"type": "text",
"from": {"data": "nodes"},
"interactive": false,
"enter": {"fill": {"value": "black"}, "fontSize": {"value": 10}},
"encode": {
"update": {
"y": {"field": "y", "offset": {"signal": "nodeRadius * -0.1"}},
"x": {"field": "x"},
"text": {"field": "datum.name"},
"align": {"value": "center"}
}
}
}
]
}
或者你可以像这样拆分单词。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A node-link diagram with force-directed layout, depicting character co-occurrence in the novel Les Misérables.",
"width": 700,
"height": 500,
"autosize": "pad",
"signals": [
{
"name": "nodeRadius",
"value": 50,
"bind": {"input": "range", "min": 1, "max": 50, "step": 1}
},
{
"name": "nodeCharge",
"value": -100,
"bind": {"input": "range", "min": -100, "max": 10, "step": 1}
},
{
"name": "linkDistance",
"value": 66,
"bind": {"input": "range", "min": 5, "max": 100, "step": 1}
}
],
"data": [
{
"name": "node_data",
"values": [
{"name": "A Name", "type": "node", "1d": 0},
{"name": ["A Very", "Long Name"], "type": "node", "1d": 1}
]
},
{"name": "edge_data", "values": [{"source": 0, "target": 1}]}
],
"marks": [
{
"type": "symbol",
"name": "nodes",
"from": {"data": "node_data"},
"encode": {
"enter": {
"fill": {"value": "steelblue"},
"size": {"value": 10000},
"tooltip": {"field": "name"}
}
},
"transform": [
{
"type": "force",
"iterations": 300,
"static": {"signal": "false"},
"signal": "force",
"forces": [
{
"force": "center",
"x": {"signal": "width/2"},
"y": {"signal": "height/2"}
},
{"force": "collide", "radius": {"signal": "nodeRadius"}},
{"force": "nbody", "strength": {"signal": "nodeCharge * 10"}},
{
"force": "link",
"links": "edge_data",
"distance": {"signal": "linkDistance"}
}
]
}
]
},
{
"type": "path",
"from": {"data": "edge_data"},
"interactive": false,
"encode": {
"update": {"stroke": {"value": "#ccc"}, "strokeWidth": {"value": 0.5}}
},
"transform": [
{
"type": "linkpath",
"require": {"signal": "force"},
"shape": "line",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
},
{
"type": "text",
"from": {"data": "nodes"},
"interactive": false,
"enter": {"fill": {"value": "black"}, "fontSize": {"value": 10}},
"encode": {
"update": {
"y": {"field": "y", "offset": {"signal": "nodeRadius * -0.1"}},
"x": {"field": "x"},
"text": {"field": "datum.name"},
"align": {"value": "center"}
}
}
}
]
}
如果您想要动态地将节点大小调整到标签范围，则必须使用反应几何。
0
投票
投票
为您使用反应几何。此示例来自 GitHub 上的jheer。 这将根据文本标记设置矩形的宽度和高度。
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 100,
"height": 100,
"data": [
{"name": "labels", "values": [{"label": "Text"}]}
],
"marks": [
{
"type": "group",
"signals": [
{"name": "bgoffset", "value": 3}
],
"marks": [
{
"name": "textmark",
"type": "text",
"from": {"data": "labels"},
"encode": {
"enter": {
"text": {"field": "label"},
"x": {"value": 50},
"y": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "center"},
"baseline": {"value": "middle"}
}
},
"zindex": 1
},
{
"name": "rectmark",
"type": "rect",
"from": {"data": "textmark"},
"encode": {
"enter": {
"x": {"field": "bounds.x1", "round": true, "offset": {"signal": "-bgoffset"}},
"x2": {"field": "bounds.x2", "round": true, "offset": {"signal": "bgoffset"}},
"y": {"field": "bounds.y1", "round": true, "offset": {"signal": "-bgoffset"}},
"y2": {"field": "bounds.y2", "round": true, "offset": {"signal": "bgoffset"}},
"fill": {"value": "aliceblue"},
"stroke": {"value": "steelblue"}
}
}
}
]
}
]
}
最新问题
- 不同加数问题贪心算法
- 我无法在 Ajax 中执行 Perl 脚本
- AVX2 / gcc：通过使用不同的寄存器来提高CPU级并行性
- 我无法在ajax中执行perl脚本
- 实体框架。直接编辑集合导航属性时的奇怪行为
- 在Python中检测比例参考线坐标
- 如何防止我的Python脚本在Windows上运行后立即关闭？
- Gridgain9 是 ignite2 还是 ignite3 的下游
- 如何修改JavaFX中的ChoiceBox复选标记？
- 在pygame中实时播放带有alpha通道和同步音频的两个混合视频？
- 如何在cypher-shell中使用环境变量NEO4J_PASSWORD
- ASP Classic IPN 侦听器可以工作，但现在不行了
- 如何实际使用 cv2.estimateAffine3D 在 python 中对齐 3d 点？
- 如何在 R 中生成具有跨多个组的 FDR 校正 P 值的分层汇总表
- 我无法使用 Exact Alarm 进行颤振本地通知
- Azure OpenAI Studio Playground：在向任何函数提交输出时，我的助手总是返回未定义的错误
- 如何对Bull.js与Redis服务器的连接实现完整而非部分的TLS保护？
- Nuget 资源从 https 更改为 http
- 不同值时如何在同一行返回结果
- 我可以将 boost::intrusive::rbtree 与 stateful_value_traits 一起使用吗？
© www.soinside.com 2019 - 2024. All rights reserved.