初見 g6 圖表庫

hello world

// 1. 準備好數據
// node(節點)
let nodes = [
    {
        id: 1, // 節點 id
        x: 0, // 節點 x 座標
        y: 0 // 節點 y 座標
    },
    { id: 2, x: 100, y: 0 }
]
// edge(邊)
let edges = [
    {
        source: '2', // 節點 id，從哪裏出發
        target: '1' // 節點 id，到哪裏結束
    }
]

// 2. 初始化對象
let g6 = new G6.Graph({
  container: 'container', // 容器 id
  fitView: 'cc', // 渲染位置，cc 表示渲染到圖表的中間位置(center center)
  height: window.innerHeight // 畫布高
})

// 3. 渲染數據
g6.read({ edges, nodes })

這是渲染出來的效果。Demo源碼， 官方文檔。

自定義節點

能夠看到默認的節點是一個藍色的圈，若是要想改變節點的樣子，就須要用到自定義節點。

// 1. 準備好數據
// node(節點)
let nodes = [
    {
        id: 1, // 節點 id
        x: 0, // 節點 x 座標
        y: 0, // 節點 y 座標
        name: '張三' // 自定義數據
    },
    {
        id: 2,
        x: 100,
        y: 0,
        name: '李四' // 自定義數據
    }
]
// edge(邊)
let edges = [
    {
        source: '2', // 節點 id，從哪裏出發
        target: '1' // 節點 id，到哪裏結束
    }
]

// 2. 初始化對象
let g6 = new G6.Graph({
    container: 'container', // 容器 id
    renderer: 'svg',
    fitView: 'cc', // 渲染位置，cc 表示渲染到圖表的中間位置(center center)
    height: window.innerHeight // 畫布高
})

// 3. 註冊節點
G6.registerNode('rect', {
    draw (item) {
        const group = item.getGraphicGroup()
        const model = item.getModel()
        let size = 50    
        let center = size / 2
        
        // 繪製文本節點
        let rect = group.addShape('rect', {
            attrs: {
                x: 0,
                y: 0,
                width: size,
                height: size,
                fill: '#6cf'
            }
        })
        
        // 繪製圓形
        let circle = group.addShape('circle', {
            attrs: {
                x: center,
                y: center,
                r: center,
                fill: '#ddd',
                stroke: '#f06'
            }
        })
        
        // 繪製文本節點
        let text = group.addShape('text', {
            attrs: {
                x: 0,
                y: 0,
                fontSize: 20,
                fill: '#000',
                stroke: 'orange',
                text: `id：${model.id}`
            }
        })
        
        // 繪製 dom 元素
        let dom = group.addShape('dom', {
            attrs: {
                x: 0,
                y: 0,
                width: size,
                height: size,
                html: `<div>你好呀${model.name}，你好呀${model.name}</div>`
            }
        })
        
        return group
    }
})

// 4. 使用節點
g6.node({
    shape: 'rect'
})

// 5. 渲染數據
g6.read({ edges, nodes })

下圖是渲染出來的效果。Demo源碼，官方文檔。

自定義節點的時候有如下現象：

1. 添加 shape 有前後順序，後面會覆蓋前面的。像是 dom 的 z-index
2. 添加 text 節點的時候，其它 shape 會避讓。一樣座標設置的都是 [0, 0]，文字會渲染在頂部。
3. 連接線會以 return 元素爲基準。若是 return text，線會連在 text 節點那裏；若是 return group，就是總體的中間。
4. model 裏能夠取出定義 node 的時候的其它數據，好比例子裏的 name。
5. 繪製的元素大小指定後，超出的部分會被裁切，好比例子裏的 dom。
6. 繪製 dom 元素時，須要在初始化對象的時候，指定 new G6.Graph({ renderer: 'svg' }) 。

自定義邊

自定義邊的使用方法跟自定義節點的使用方式相似。

// 1. 準備好數據
// node(節點)
let nodes = [
    { id: 1, x: 0, y: 0 },
    { id: 2, x: 100, y: 0 },
    { id: 3, x: 100, y: 50 }
]
// edge(邊)
let edges = [
    {
        source: 1, // 節點 id，從哪裏出發
        target: 2 // 節點 id，到哪裏結束
    },
    {
        source: 1, // 節點 id，從哪裏出發
        target: 3 // 節點 id，到哪裏結束
    }
]

// 2. 初始化對象
let g6 = new G6.Graph({
    container: 'container', // 容器 id
    fitView: 'cc', // 渲染位置，cc 表示渲染到圖表的中間位置(center center)
    height: window.innerHeight // 畫布高
})

// 3. 自定義邊
G6.registerEdge('line', {
    // 路徑
    getPath (item) {
        const points = item.getPoints()
        const start = points[0]
        const end = points[points.length - 1]
        return [
          [ 'M', start.x, start.y ],
          [ 'L', end.x, end.y ]
        ]
    },
    // 起始（圓形）箭頭
    startArrow: {
        path () {
            const r = 5
            const x = -5
            const y = 0
            return [
                [ 'M', x, y - r ],
                [ 'a', r, r, 0, 1, 1, 0, 2 * r ],
                [ 'a', r, r, 0, 1, 1, 0, -2 * r ],
                [ 'z' ]
            ]
        },
        shorten () {
            return 10
        },
        style (item) {
            const keyShape = item.getKeyShape()
            const { strokeOpacity, stroke } = keyShape.attr()
            return {
                fillOpacity: strokeOpacity,
                fill: '#fff',
                stroke
            }
        }
    }
})

// 4. 使用邊
g6.edge({
    shape: 'line',
    startArrow: true, // 添加頭部箭頭
    color: 'red',
    endArrow: true // 添加尾部箭頭
})

// 5. 渲染數據
g6.read({ edges, nodes })

這是渲染出來的效果。Demo源碼，官方文檔。

自定義節邊的時候有如下現象：

1. 自帶的邊是有透明度灰色的線。
2. 設置 { endArrow: true } 以後就會在結束點加上箭頭。
3. 顏色能夠直接設置 color，也能夠是同 style 繪製。

添加事件

// 1. 準備好數據
// node(節點)
let nodes = [
    { id: 1, x: 0, y: 0 },
    { id: 2, x: 100, y: 0 },
    { id: 3, x: 100, y: 50 }
]
// edge(邊)
let edges = [
    {
        source: 1, // 節點 id，從哪裏出發
        target: 2 // 節點 id，到哪裏結束
    },
    {
        source: 1, // 節點 id，從哪裏出發
        target: 3 // 節點 id，到哪裏結束
    }
]

// 2. 初始化對象
let g6 = new G6.Graph({
    container: 'container', // 容器 id
    fitView: 'cc', // 渲染位置，cc 表示渲染到圖表的中間位置(center center)
    height: window.innerHeight // 畫布高
})

// 3. 添加事件監聽
g6.on('node:click', (e) => {
    const { item } = e
    const { id, x, y } = item.getModel()
    alert(`id:${id}, x:${x}, y:${y}`)
})

// 4. 渲染數據
g6.read({ edges, nodes })

事件的監聽是組合的，組合方式就是 [對象]:[事件]，'node'，'edge'，'group', 'guide'，均可以自由組合使用，如 node:click, edge:dbclick。
Demo源碼，官方文檔。