初見g 6グラフライブラリ


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: `
${model.name}, ${model.name}
` } }) return group } }) // 4. g6.node({ shape: 'rect' }) // 5. g6.read({ edges, nodes })

次の図はレンダリングされた効果です.Demoソース、公式ドキュメント.
ノードをカスタマイズするときに次の現象が発生します.
  • shapeを追加するには前後の順序があり、後は前を上書きします.domのようなz-index
  • textノードを追加すると、他のshapeが回避されます.同じ座標を[0,0]に設定すると、テキストが上部にレンダリングされます.
  • リンク線はreturn要素を基準とします.return textの場合、線はtextノードに接続されます.returnグループなら、全体の真ん中です.
  • modelでは、nodeを定義するときの他のデータ、例えば例のnameを取り出すことができます.
  • で描画された要素のサイズを指定すると、例のdomのような超過部分が切り取られます.
  • 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ソース、公式ドキュメント.
    セクションエッジをカスタマイズする場合は、次の現象があります.
  • に付属するエッジは、透明度のある灰色の線です.
  • { endArrow: true }を設定すると終了点に矢印が付きます.
  • 色は、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ソース、公式ドキュメント.