摘要：準(zhǔn)備好數(shù)據(jù)節(jié)點(diǎn)節(jié)點(diǎn)節(jié)點(diǎn)坐標(biāo)節(jié)點(diǎn)坐標(biāo)邊節(jié)點(diǎn)，從哪里出發(fā)節(jié)點(diǎn)，到哪里結(jié)束初始化對(duì)象容器渲染位置，表示渲染到圖表的中間位置畫(huà)布高渲染數(shù)據(jù)這是渲染出來(lái)的效果。鏈接線會(huì)以元素為基準(zhǔn)。繪制元素時(shí)，需要在初始化對(duì)象的時(shí)候，指定。

// 1. 準(zhǔn)備好數(shù)據(jù)
// node(節(jié)點(diǎn))
let nodes = [
    {
        id: 1, // 節(jié)點(diǎn) id
        x: 0, // 節(jié)點(diǎn) x 坐標(biāo)
        y: 0 // 節(jié)點(diǎn) y 坐標(biāo)
    },
    { id: 2, x: 100, y: 0 }
]
// edge(邊)
let edges = [
    {
        source: "2", // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: "1" // 節(jié)點(diǎn) id，到哪里結(jié)束
    }
]

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

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

這是渲染出來(lái)的效果。Demo源碼， 官方文檔。

可以看到默認(rèn)的節(jié)點(diǎn)是一個(gè)藍(lán)色的圈，如果要想改變節(jié)點(diǎn)的樣子，就需要用到自定義節(jié)點(diǎn)。

// 1. 準(zhǔn)備好數(shù)據(jù)
// node(節(jié)點(diǎn))
let nodes = [
    {
        id: 1, // 節(jié)點(diǎn) id
        x: 0, // 節(jié)點(diǎn) x 坐標(biāo)
        y: 0, // 節(jié)點(diǎn) y 坐標(biāo)
        name: "張三" // 自定義數(shù)據(jù)
    },
    {
        id: 2,
        x: 100,
        y: 0,
        name: "李四" // 自定義數(shù)據(jù)
    }
]
// edge(邊)
let edges = [
    {
        source: "2", // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: "1" // 節(jié)點(diǎn) id，到哪里結(jié)束
    }
]

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

// 3. 注冊(cè)節(jié)點(diǎn)
G6.registerNode("rect", {
    draw (item) {
        const group = item.getGraphicGroup()
        const model = item.getModel()
        let size = 50    
        let center = size / 2
        
        // 繪制文本節(jié)點(diǎn)
        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: "#ffffd",
                stroke: "#f06"
            }
        })
        
        // 繪制文本節(jié)點(diǎn)
        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: `
你好呀${model.name}，你好呀${model.name}
`
            }
        })
        
        return group
    }
})

// 4. 使用節(jié)點(diǎn)
g6.node({
    shape: "rect"
})

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

下圖是渲染出來(lái)的效果。Demo源碼，官方文檔。

自定義節(jié)點(diǎn)的時(shí)候有以下現(xiàn)象：

添加 shape 有先后順序，后面會(huì)覆蓋前面的。像是 dom 的 z-index

添加 text 節(jié)點(diǎn)的時(shí)候，其它 shape 會(huì)避讓。同樣坐標(biāo)設(shè)置的都是 [0, 0]，文字會(huì)渲染在頂部。

鏈接線會(huì)以 return 元素為基準(zhǔn)。如果 return text，線會(huì)連在 text 節(jié)點(diǎn)那里；如果 return group，就是整體的中間。

model 里可以取出定義 node 的時(shí)候的其它數(shù)據(jù)，比如例子里的 name。

繪制的元素大小指定后，超出的部分會(huì)被裁切，比如例子里的 dom。

繪制 dom 元素時(shí)，需要在初始化對(duì)象的時(shí)候，指定 new G6.Graph({ renderer: "svg" }) 。

自定義邊的使用方法跟自定義節(jié)點(diǎn)的使用方式類似。

// 1. 準(zhǔn)備好數(shù)據(jù)
// node(節(jié)點(diǎn))
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, // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: 2 // 節(jié)點(diǎn) id，到哪里結(jié)束
    },
    {
        source: 1, // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: 3 // 節(jié)點(diǎn) id，到哪里結(jié)束
    }
]

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

// 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. 渲染數(shù)據(jù)
g6.read({ edges, nodes })

這是渲染出來(lái)的效果。Demo源碼，官方文檔。

自定義節(jié)邊的時(shí)候有以下現(xiàn)象：

自帶的邊是有透明度灰色的線。

設(shè)置 { endArrow: true } 之后就會(huì)在結(jié)束點(diǎn)加上箭頭。

顏色可以直接設(shè)置 color，也可以是同 style 繪制。

// 1. 準(zhǔn)備好數(shù)據(jù)
// node(節(jié)點(diǎn))
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, // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: 2 // 節(jié)點(diǎn) id，到哪里結(jié)束
    },
    {
        source: 1, // 節(jié)點(diǎn) id，從哪里出發(fā)
        target: 3 // 節(jié)點(diǎn) id，到哪里結(jié)束
    }
]

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

// 3. 添加事件監(jiān)聽(tīng)
g6.on("node:click", (e) => {
    const { item } = e
    const { id, x, y } = item.getModel()
    alert(`id:${id}, x:${x}, y:${y}`)
})

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

事件的監(jiān)聽(tīng)是組合的，組合方式就是 [對(duì)象]:[事件]，"node"，"edge"，"group", "guide"，都可以自由組合使用，如 node:click, edge:dbclick。
Demo源碼，官方文檔。