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...