antdVG6隨記

g6是一個很棒的可視化工具

目前支持開發者搭建屬於自己的圖，圖分析、圖應用、圖編輯器
圖編輯器可以支持多種圖例的創建

G6 是一個簡單、易用、完備的圖可視化引擎，它在高定制能力的基礎上，提供了一系列設計優雅、便於使用的圖可視化解決方案。能幫助開發者搭建屬於自己的圖 圖分析 應用或是 圖編輯器 應用

最近一直在被G6可視化工具困擾，在逐漸摸索過程中，慢慢可以進行簡單圖例的搭建
以下，根據react中如何使用G6來寫這篇文章

----Go

整體項目使用es6模塊化開發

首先下載G6
npm install @antv/g6 --save

import React from 'react';
import G6 from '@antv/g6';

class G6 extends React.Component {
    constructor(props) {
        super(props);
        this.state={

        };
    }
    componentDidMount() {
        // dom 已經渲染完成時加載圖片, G6渲染依賴根節點
        this.renderG6();
    }
    renderG6 = () => {
        // 渲染圖所需數據
        const data = {
            nodes: [{
                id: 'node1',
                shape: 'customNode',
                x: 100,
                y: 200
            },{
                id: 'node2',
                x: 300,
                y: 200
            }],
            edges: [{
                id: 'edge1',
                target: 'node2',
                source: 'node1'
            }]
        }; 
        // 初始化G6圖
        const graph = new G6.Graph({
            container: 'mountNode',
            width: 600,
            height: 300
        });
        // Graph 是最基礎的圖類, G6 技術棧中所有關系圖都是由該類負責繪制
        // 讀數據
        graph.read(data);
    }
    render() {
        return (
            <div id="mountNode"></div>
        )
    }
}

自定義節點

    G6.registerNode('customNode', {
        draw(item){
            // draw 是圖項最終繪制的接口， 可以拿到shape為customNode的所有數據
            const group = item.getGraphicGroup(); // 獲取 G (圖形庫) 的圖形圖組
            const model = item.getModel();
            // 圖形數據
            return group.addShape('rect', {
                attrs: {
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 100,
                    stroke: 'red'
                }
                anchor: array || object || callback
                <!-- anchor: [
                    [0.5, 1],     // 底邊中點
                    [0.5, 0],     // 上邊中點
                    [1, 0],     // 左邊中點
                    [1, 0.5],     // 右邊中點
                ], -->
                
            });
        }
}, '基於某種圖形進行繪制的類型');

---

先下班。。。。。。