【前端学习】AntV G6-02 图元素及样式配置、状态样式和事件监听

四喜花露水

已于 2024-07-14 16:54:43 修改

阅读量480

点赞数 5

分类专栏： AntV G6 文章标签：前端学习 javascript anti-design-vue

于 2024-07-14 16:45:28 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/140418793

版权

AntV G6 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

课程链接：

AntV G6 系列课程第 3 集：图元素及样式配置、状态样式和事件监听_哔哩哔哩_bilibili

课程大纲

Node节点

图形样式属性 Shape Attr | G6 (antgroup.com)

Edge 边 03:18

Cubic | G6 (antgroup.com)

Combo 节点分组 03:51

所有图表 | G6 (antgroup.com)

StateStyles 状态样式 04:04

G6 状态管理的最佳实践 | G6 (antgroup.com)

事件监听 08:13

基础事件 Event | G6 (antgroup.com)

【扩展】

（x/y，clientX/clientY，canvasX/canvasY 三套坐标系详解见 G6 坐标系深度解析 | G6 (antgroup.com)

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>03 图元素及样式配置、状态样式和事件监听</title>
        <!-- 引入 G6 -->
        <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script>
            const data = {
                nodes: [{
                        id: '1',
                        label: 'node-1',
                        type: 'rect',
                        x: 100,
                        y: 200,
                        size: [50, 25],
                        style: {
                            fill: '#91d5ff',
                            stroke: '#0050b3',
                        },
                        stateStyles: {
                            stateName1: {
                                fill: '#1890ff'
                            },
                            stateName2: {
                                fill: '#1890ff',
                                stroke: '#ff7875',
                                lineWidth: 3,
                                'text-shape': {
                                    fontSize: 20,
                                    fontWeight: 500
                                }
                            }
                        }
                    },
                    {
                        id: '2',
                        label: '节点2',
                        labelCfg: {
                            position: 'bottom',
                            style: {
                                fill: '#531dab',
                                fontWeight: 500,
                            }
                        },
                        stateStyles: {
                            stateName1: {
                                stroke: '#9254de',
                                lineWidth: 5
                            },
                            stateName2: {
                                fill: '#9254de',
                                'text-shape': {
                                    fontSize: 20,
                                    fill: '#f00'
                                }
                            }
                        }
                    },
                    {
                        id: '3',
                        label: 'node-3'
                    }
                ],
                edges: [{
                        source: '1',
                        target: '2',
                        style: {
                            endArrow: {
                                path: 'M 0,0 L 20,10 L 20,-10 Z',
                                fill: '#ccc',
                                stroke: '#0f0'
                            },
                            startArrow: true
                        }
                    },
                    {
                        source: '2',
                        target: '3'
                    },
                    {
                        source: '3',
                        target: '1'
                    }
                ]
            }

            const width = document.getElementById('container').scrollWidth
            const height = document.getElementById('container').scrollHeight || 450

            const graph = new G6.Graph({
                container: 'container',
                width,
                height,
                defaultNode: {
                    type: 'ellipse',
                    style: {
                        fill: '#efdbff',
                        stroke: '#531dab'
                    }
                },
                defaultEdge: {
                    // ...
                },
                nodeStateStyles:{
                    stateName3: {
                        fill: '#d9f7be',
                        stroke: '#135200'
                    },    
                    stateName4: {
                        fill: '#d9f7be',
                        stroke: '#135200',
                        'text-shape': {
                            fontWeight: 800
                        }
                    },
                },
                fitView: true,
                fitViewPadding: 100,
                // 模式
                modes: {
                    default: [{
                        type: 'drag-canvas', // 可以按这个格式写成对象的形式
                        direction: 'x'
                    }, 'drag-node', 'zoom-canvas'],
                    edit: ['drag-canvas', 'zoom-canvas', 'click-select'],
                    edit2: ['drag-node'],
                },
            })
            
            // afterrender 需要在 read 之前进行监听
            // graph.on('afterrender', e=> {
            //     alert('render done!')
            // })            

            graph.read(data)

            // mouseenter与mouseleave
            graph.on('node:mouseenter', e => {
                // 【注】在添加2种状态（stateName1与stateName3）后
                // node1、node2直接hover无反应，在click后，hover才有样式 
                // 在调换stateName1与stateName3顺序后, 直接hover node3 无反应
                graph.setItemState(e.item, 'stateName1', true)    
                graph.setItemState(e.item, 'stateName3', true)            
            })
            graph.on('node:mouseleave', e => {
                graph.setItemState(e.item, 'stateName1', false)    
                graph.setItemState(e.item, 'stateName3', false)            
            })
            
            // node click
            graph.on('node:click', e => {
                graph.setItemState(e.item, 'stateName4', true)    
                graph.setItemState(e.item, 'stateName2', true)            
            })
            
            // canvas click
            graph.on('canvas:click', e => {
                graph.getNodes().forEach(node=>{
                    graph.setItemState(node, 'stateName4', false)
                    graph.setItemState(node, 'stateName2', false)
                })
            })
            
            graph.on('text-shape:click', e => {
                alert('clicked text-shape')
            })

            graph.data(data)
            graph.render()
        </script>
    </body>
</html>