修改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"}
}
}
}
]
}
]
}
最新问题
- Power 自动化云流程 |本地 SQL 数据库 |网关|执行 SQL 查询
- Excel高级过滤器中如何使用“,”实现OR逻辑
- 如何在 Azure AI/认知搜索 (Azure.search.documents) 中搜索多个字段中的不同文本？
- 如果没有连接设备，Android studio 模拟器会自动启动
- 所请求的集合成员不存在 - MS Access DBA
- 更新 DataStore 中的数据时是否必须使用特定的协程调度程序？
- jq 中包含“@”和“-”的转义字段名称？ [重复]
- Service-worker.js 从未正确注册
- 如何动态地将字符串转换为（并从）UTF8 特殊字体字符转换？
- 在 HTML 中的嵌入元素上滚动
- 在 Visual Studio Code 中的不同编辑器组中打开已打开的文件
- 反应分页如何在更改类别时返回第0页
- 如何在 Visual Studio Code Extension 中的 Hover Provider 中显示本地图像？
- Draft-js：不可编辑实体组件丢失光标
- 如何在点后无限数字的javascript中进行四舍五入？ [重复]
- 如何修复内部错误：递归过多？
- 在 tasm 8086 中创建精灵时遇到问题
- SIMD：逐个字符比较两个字符串并找出匹配的总数
- 忽略 href 中的 % 字符
- perl XML::LibXML 何时需要 new() 调用
© www.soinside.com 2019 - 2024. All rights reserved.