G6使用指北

2021-10-25 00:01:28 字數 1305 閱讀 2007

g6 是乙個圖視覺化引擎。它提供了圖的繪製、布局、分析、互動、動畫等圖視覺化的基礎能力。旨在讓關係變得透明,簡單。讓使用者獲得關係資料的 insight。

g6圖上的節點包括有節點(nodes)和邊(edges),節點可以是circle、rect、、dom等,邊可以有直線 line、曲線polyline、貝塞爾曲線等

如下為內建節點和邊的具體樣式:

自定義邊:

g6.registeredge('custom-path', ,

// must be assigned in g6 3.3 and later versions. it can be any value you want

name: 'path-shape', // path的名稱

});return shape;

},});

自定義節點

// 自定義乙個名為 custom-node 的節點

g6.registernode('custom-node', ,

name: 'image-shape'

});const text = group.addshape('text',,

name: 'text-shape'

});}},

// 繼承了 circle節點

'circle');

html:

js:import g6 from "@antv/g6";

const data = ,

],edges: [

]};const graph = new g6.graph(,

labelcfg: }},

defaultedge: ,

fitcenter:true,//是否居中展示

fitview:true //是否自適應螢幕大小

});//關閉區域性渲染,去除拖動產生的殘影問題

g6的minimap中的配置 g6 基本

g6是什麼 g6 是乙個圖視覺化引擎。它提供了圖的繪製 布局 分析 互動 動畫等圖視覺化的基礎能力。旨在讓關係變得透明,簡單 優秀的效能 豐富的元素 可控的互動 強大的布局 便捷的元件 友好的體驗 當時的為什麼選擇g6?1.g6的例子更加直觀,感覺更容易移植擴充套件.初始成本比較低 2.相比d3的文...

github 使用指北

看了網上好多github的新手教程,感覺基本上寫的都太繁雜,所以乾脆自己寫乙個。github 形象來說就是在本地檔案 和 遠端檔案間建立乙個對映方便遠端儲存 分享 共同維護。附註 不用打。初始化 git init 新建乙個資料夾,cd過去,使用git init,使得該資料夾成為本地倉庫的根目錄 gi...

vscode使用指北

q vscode安裝eslint外掛程式,編譯器會預設使用eslint外掛程式,導致無法格式化 a 禁用eslint外掛程式,然後按快捷鍵格式化 編譯器會提示選擇格式化工具,選擇prettier即可。啟用eslint外掛程式,格式化的時候也會在 的最後一行新增空格,滿足eslint的語法規則。q p...