G6 图可视化引擎——入门教程——使用图布局 Layout
當(dāng)數(shù)據(jù)中沒有節(jié)點(diǎn)位置信息，或者數(shù)據(jù)中的位置信息不滿足需求時(shí)，需要借助一些布局算法對(duì)圖進(jìn)行布局。G6 提供了 9 種一般圖的布局和 4 種樹圖的布局：
- 一般圖：
- Random Layout：隨機(jī)布局；
- Force Layout：經(jīng)典力導(dǎo)向布局；（布局網(wǎng)絡(luò)中粒子之間具有引力和斥力，從隨機(jī)無序的布局不斷演變?yōu)橼呌谄胶夥€(wěn)定的布局。適用于描述事物間關(guān)系，比如人物關(guān)系、計(jì)算機(jī)網(wǎng)絡(luò)關(guān)系等。）
- Circular Layout：環(huán)形布局；
- Radial Layout：輻射狀布局；
- MDS Layout：高維數(shù)據(jù)降維算法布局；
- Fruchterman Layout：Fruchterman 布局，一種力導(dǎo)布局；
- Dagre Layout：層次布局；
- Concentric Layout：同心圓布局，將重要（默認(rèn)以度數(shù)為度量）的節(jié)點(diǎn)放置在布局中心；
- Grid Layout：格子布局，將節(jié)點(diǎn)有序（默認(rèn)是數(shù)據(jù)順序）排列在格子上。
- 樹圖布局：
- Dendrogram Layout：樹狀布局（葉子節(jié)點(diǎn)布局對(duì)齊到同一層）；
- CompactBox Layout：緊湊樹布局；
- Mindmap Layout：腦圖布局；
- Intended Layout：縮進(jìn)布局。
本教程中，我們使用的是力導(dǎo)向布局 (Force Layout)。
取消自動(dòng)適配畫布
我們?cè)谥暗慕坛汤锩?#xff0c;為了能夠?qū)⒊霎嫴嫉膱D適配到視野中，在實(shí)例化圖時(shí)使用了 fitView 配置項(xiàng)。這節(jié)開始我們將會(huì)去掉這個(gè)特性。因?yàn)閺?fù)雜的布局系統(tǒng)會(huì)打破適配的規(guī)則，反而會(huì)造成更多的困擾。讓我們將相關(guān)的適配代碼變?yōu)樽⑨?#xff1a;
const graph = new G6.Graph({// ...// fitView: true,// fitViewPadding: [ 20, 40, 50, 20 ] });默認(rèn)布局
當(dāng)實(shí)例化圖時(shí)沒有配置布局時(shí)：
- 若數(shù)據(jù)中節(jié)點(diǎn)有位置信息（x 和 y），則按照數(shù)據(jù)的位置信息進(jìn)行繪制；
- 若數(shù)據(jù)中節(jié)點(diǎn)沒有位置信息，則默認(rèn)使用 Random Layout 進(jìn)行布局。
配置布局
G6 使用布局的方式非常簡(jiǎn)單，在圖實(shí)例化的時(shí)候，加上 layout 配置即可。下面代碼在實(shí)例化圖時(shí)設(shè)置了布局方法為 type: ‘force’，即經(jīng)典力導(dǎo)向圖布局。并設(shè)置了參數(shù) preventOverlap: true ，表示希望節(jié)點(diǎn)不重疊。
const graph = new G6.Graph({// ... // 其他配置項(xiàng)layout: { // Object，可選，布局的方法及其配置項(xiàng)，默認(rèn)為 random 布局。type: 'force', // 指定為力導(dǎo)向布局preventOverlap: true, // 防止節(jié)點(diǎn)重疊// nodeSize: 30 // 節(jié)點(diǎn)大小，用于算法中防止節(jié)點(diǎn)重疊時(shí)的碰撞檢測(cè)。由于已經(jīng)在上一節(jié)的元素配置中設(shè)置了每個(gè)節(jié)點(diǎn)的 size 屬性，則不需要在此設(shè)置 nodeSize。} });結(jié)果如下：
如圖所示，節(jié)點(diǎn)按照力導(dǎo)向布局自動(dòng)平衡。但是圖中的節(jié)點(diǎn)過于擁擠，邊上的文字信息被擠占，無法看清。我們希望布局計(jì)算邊的距離可以更長(zhǎng)一些。G6 的力導(dǎo)向布局提供了 linkDistance 屬性用來指定布局的時(shí)候邊的距離長(zhǎng)度：
const graph = new G6.Graph({// ...layout: {type: 'force',preventOverlap: true,linkDistance: 100, // 指定邊距離為100}, });結(jié)果如下：
提示：布局將在調(diào)用 graph.render() 時(shí)執(zhí)行計(jì)算。
完整代碼
至此，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>Tutorial Demo</title> </head> <body> <div id="mountNode"></div> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script> <script>const graph = new G6.Graph({container: 'mountNode',width: 800,height: 600,defaultNode: {size: 30,labelCfg: {style: {fill: '#fff',},},},defaultEdge: {labelCfg: {autoRotate: true,},},layout: {type: 'force', // 設(shè)置布局算法為 forcelinkDistance: 200, // 設(shè)置邊長(zhǎng)為 100preventOverlap: true, // 設(shè)置防止重疊},});const main = async () => {const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',);const remoteData = await response.json();const nodes = remoteData.nodes;const edges = remoteData.edges;nodes.forEach(node => {if (!node.style) {node.style = {};}node.style.lineWidth = 1;node.style.stroke = '#666';node.style.fill = 'steelblue';switch (node.class) {case 'c0': {node.type = 'circle';break;}case 'c1': {node.type = 'rect';node.size = [35, 20];break;}case 'c2': {node.type = 'ellipse';node.size = [35, 20];break;}}});edges.forEach(edge => {if (!edge.style) {edge.style = {};}edge.style.lineWidth = edge.weight;edge.style.opacity = 0.6;edge.style.stroke = 'grey';});graph.data(remoteData);graph.render();};main(); </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——使用图布局 Layout的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——入门教程——元素及
- 下一篇： G6 图可视化引擎——入门教程——图的交