84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我正在尝试使用力导向布局在 VEGA 中创建网络图,该布局显示每个节点的标签。这个问题中提到了一种可能的方法。通过参考Vega编辑器,我们可以观察到标签是存在的,但是存在一些重叠和视觉混乱的问题。
因此,我想知道是否有可能实现与此示例类似的结果,其中标签在将鼠标悬停在节点上时出现,并在图表中保持突出显示和固定。
我尝试了“文本”字段中的一些更改,但我想它可能比这更复杂。
使用此配置:
{ "$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, "padding": 0, "autosize": "none", "signals": [ { "name": "cx", "update": "width / 2" }, { "name": "cy", "update": "height / 2" }, { "name": "nodeRadius", "value": 8, "bind": {"input": "range", "min": 1, "max": 50, "step": 1} }, { "name": "nodeCharge", "value": -30, "bind": {"input": "range", "min":-100, "max": 10, "step": 1} }, { "name": "linkDistance", "value": 30, "bind": {"input": "range", "min": 5, "max": 100, "step": 1} }, { "name": "static", "value": true, "bind": {"input": "checkbox"} }, { "description": "State variable for active node fix status.", "name": "fix", "value": false, "on": [ { "events": "symbol:mouseout[!event.buttons], window:mouseup", "update": "false" }, { "events": "symbol:mouseover", "update": "fix || true" }, { "events": "[symbol:mousedown, window:mouseup] > window:mousemove!", "update": "xy()", "force": true } ] }, { "description": "Graph node most recently interacted with.", "name": "node", "value": null, "on": [ { "events": "symbol:mouseover", "update": "fix === true ? item() : node" } ] }, { "description": "Flag to restart Force simulation upon data changes.", "name": "restart", "value": false, "on": [ {"events": {"signal": "fix"}, "update": "fix && fix.length"} ] } ], "data": [ { "name": "node-data", "url": "data/miserables.json", "format": {"type": "json", "property": "nodes"} }, { "name": "link-data", "url": "data/miserables.json", "format": {"type": "json", "property": "links"} } ], "scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "node-data", "field": "group"}, "range": {"scheme": "category20c"} } ], "marks": [ { "name": "nodes", "type": "symbol", "zindex": 1, "from": {"data": "node-data"}, "on": [ { "trigger": "fix", "modify": "node", "values": "fix === true ? {fx: node.x, fy: node.y} : {fx: fix[0], fy: fix[1]}" }, { "trigger": "!fix", "modify": "node", "values": "{fx: null, fy: null}" } ], "encode": { "enter": { "fill": {"scale": "color", "field": "group"}, "stroke": {"value": "white"} }, "update": { "size": {"signal": "2 * nodeRadius * nodeRadius"}, "cursor": {"value": "pointer"} } }, "transform": [ { "type": "force", "iterations": 300, "restart": {"signal": "restart"}, "static": {"signal": "static"}, "signal": "force", "forces": [ {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}}, {"force": "collide", "radius": {"signal": "nodeRadius"}}, {"force": "nbody", "strength": {"signal": "nodeCharge"}}, {"force": "link", "links": "link-data", "distance": {"signal": "linkDistance"}} ] } ] }, { "type": "text", "from": {"data": "nodes"}, "zIndex": 2, "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontSize": {"value": 15}, "fontWeight": {"value": "bold"}, "fill": {"value": "black"}, "text": {"field": "datum.name"} }, "update": {"dx": {"field": "x"}, "dy": {"field": "y"}} } }, { "type": "path", "from": {"data": "link-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" } ] } ] }
我不太清楚您的要求。我创建了这个力导向图表,并在此处添加了标签:
https://vega.github.io/vega/examples/打包气泡图/
这是我也使用动态标签创建的力导向布局。
https://github.com/PBI-David/Deneb-Showcase
这些有帮助吗?
使用此配置:
我不太清楚您的要求。我创建了这个力导向图表,并在此处添加了标签:
https://vega.github.io/vega/examples/打包气泡图/
这是我也使用动态标签创建的力导向布局。
https://github.com/PBI-David/Deneb-Showcase
这些有帮助吗?