G6 图可视化引擎——入门教程——使用图布局 Layout
生活随笔
收集整理的這篇文章主要介紹了
G6 图可视化引擎——入门教程——使用图布局 Layout
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當數據中沒有節點位置信息，或者數據中的位置信息不滿足需求時，需要借助一些布局算法對圖進行布局。G6 提供了 9 種一般圖的布局和 4 種樹圖的布局：
- 一般圖：
- Random Layout：隨機布局；
- Force Layout：經典力導向布局；（布局網絡中粒子之間具有引力和斥力，從隨機無序的布局不斷演變為趨于平衡穩定的布局。適用于描述事物間關系，比如人物關系、計算機網絡關系等。）
- Circular Layout：環形布局；
- Radial Layout：輻射狀布局；
- MDS Layout：高維數據降維算法布局；
- Fruchterman Layout：Fruchterman 布局，一種力導布局；
- Dagre Layout：層次布局；
- Concentric Layout：同心圓布局，將重要（默認以度數為度量）的節點放置在布局中心；
- Grid Layout：格子布局，將節點有序（默認是數據順序）排列在格子上。
- 樹圖布局：
- Dendrogram Layout：樹狀布局（葉子節點布局對齊到同一層）；
- CompactBox Layout：緊湊樹布局；
- Mindmap Layout：腦圖布局；
- Intended Layout：縮進布局。
本教程中，我們使用的是力導向布局 (Force Layout)。
取消自動適配畫布
我們在之前的教程里面，為了能夠將超出畫布的圖適配到視野中，在實例化圖時使用了 fitView 配置項。這節開始我們將會去掉這個特性。因為復雜的布局系統會打破適配的規則，反而會造成更多的困擾。讓我們將相關的適配代碼變為注釋：
const graph = new G6.Graph({// ...// fitView: true,// fitViewPadding: [ 20, 40, 50, 20 ] });默認布局
當實例化圖時沒有配置布局時：
- 若數據中節點有位置信息（x 和 y），則按照數據的位置信息進行繪制；
- 若數據中節點沒有位置信息，則默認使用 Random Layout 進行布局。
配置布局
G6 使用布局的方式非常簡單，在圖實例化的時候，加上 layout 配置即可。下面代碼在實例化圖時設置了布局方法為 type: ‘force’，即經典力導向圖布局。并設置了參數 preventOverlap: true ，表示希望節點不重疊。
const graph = new G6.Graph({// ... // 其他配置項layout: { // Object，可選，布局的方法及其配置項，默認為 random 布局。type: 'force', // 指定為力導向布局preventOverlap: true, // 防止節點重疊// nodeSize: 30 // 節點大小，用于算法中防止節點重疊時的碰撞檢測。由于已經在上一節的元素配置中設置了每個節點的 size 屬性，則不需要在此設置 nodeSize。} });結果如下：
如圖所示，節點按照力導向布局自動平衡。但是圖中的節點過于擁擠，邊上的文字信息被擠占，無法看清。我們希望布局計算邊的距離可以更長一些。G6 的力導向布局提供了 linkDistance 屬性用來指定布局的時候邊的距離長度：
const graph = new G6.Graph({// ...layout: {type: 'force',preventOverlap: true,linkDistance: 100, // 指定邊距離為100}, });結果如下：
提示：布局將在調用 graph.render() 時執行計算。
完整代碼
至此，完整代碼如下：
<!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', // 設置布局算法為 forcelinkDistance: 200, // 設置邊長為 100preventOverlap: true, // 設置防止重疊},});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>總結
以上是生活随笔為你收集整理的G6 图可视化引擎——入门教程——使用图布局 Layout的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： G6 图可视化引擎——入门教程——元素及
- 下一篇： G6 图可视化引擎——入门教程——图的交