SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Tutorial Demo</title>
	<style>
		.g6-tooltip {
			border: 1px solid #eee;
			border-radius: 4px;
			font-size: 12px;
			color: #545454;
			backgroud-color: rgba(255, 255, 255, 0.4);
			padding: 10px 8px;
			box-shadow: rgb(174, 174, 174) 0px 0px 10px;
		}
	</style>
</head>

<body>
	<div id="mountNode"></div>

	<!-- 引入 G6 -->
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js">

	</script>

	<script>
		const mockData = {
            "nodes": [
                {
                "id": "0",
                "label": "n0",
                "class": "c0",
                "x": 1000,
                "y": -100
                },
                {
                "id": "1",
                "label": "n1",
                "class": "c0",
                "x": 300,
                "y": -10
                },
                {
                "id": "2",
                "label": "n2",
                "class": "c0",
                "x": 10,
                "y": 10
                },
                {
                "id": "3",
                "label": "n3",
                "class": "c0",
                "x": 320,
                "y": -100
                },
                {
                "id": "4",
                "label": "n4",
                "class": "c0",
                "x": 100,
                "y": 900
                },
                {
                "id": "5",
                "label": "n5",
                "class": "c0",
                "x": 120,
                "y": 213
                },
                {
                "id": "6",
                "label": "n6",
                "class": "c1",
                "x": 543,
                "y": 12
                },
                {
                "id": "7",
                "label": "n7",
                "class": "c1",
                "x": 543,
                "y": -100
                },
                {
                "id": "8",
                "label": "n8",
                "class": "c1",
                "x": 1,
                "y": 0
                },
                {
                "id": "9",
                "label": "n9",
                "class": "c1",
                "x": 0,
                "y": -222
                },
                {
                "id": "10",
                "label": "n10",
                "class": "c1",
                "x": 435,
                "y": 69
                },
                {
                "id": "11",
                "label": "n11",
                "class": "c1",
                "x": 23,
                "y": 10
                },
                {
                "id": "12",
                "label": "n12",
                "class": "c1",
                "x": -129,
                "y": 39
                },
                {
                "id": "13",
                "label": "n13",
                "class": "c2",
                "x": 234,
                "y": 843
                },
                {
                "id": "14",
                "label": "n14",
                "class": "c2",
                "x": -301,
                "y": 129
                },
                {
                "id": "15",
                "label": "n15",
                "class": "c2",
                "x": -20,
                "y": -76
                },
                {
                "id": "16",
                "label": "n16",
                "class": "c2",
                "x": 1220,
                "y": -34
                },
                {
                "id": "17",
                "label": "n17",
                "class": "c2",
                "x": -10,
                "y": 954
                },
                {
                "id": "18",
                "label": "n18",
                "class": "c2",
                "x": 492,
                "y": 123
                },
                {
                "id": "19",
                "label": "n19",
                "class": "c2",
                "x": 123,
                "y": -241
                }
            ],
            "edges": [
                {
                "source": "0",
                "target": "1",
                "label": "e0-1",
                "weight": 1
                },
                {
                "source": "0",
                "target": "2",
                "label": "e0-2",
                "weight": 2
                },
                {
                "source": "0",
                "target": "3",
                "label": "e0-3",
                "weight": 3
                },
                {
                "source": "0",
                "target": "4",
                "label": "e0-4",
                "weight": 1.4
                },
                {
                "source": "0",
                "target": "5",
                "label": "e0-5",
                "weight": 2
                },
                {
                "source": "0",
                "target": "7",
                "label": "e0-7",
                "weight": 2
                },
                {
                "source": "0",
                "target": "8",
                "label": "e0-8",
                "weight": 2
                },
                {
                "source": "0",
                "target": "9",
                "label": "e0-9",
                "weight": 1.3
                },
                {
                "source": "0",
                "target": "10",
                "label": "e0-10",
                "weight": 1.5
                },
                {
                "source": "0",
                "target": "11",
                "label": "e0-11",
                "weight": 1
                },
                {
                "source": "0",
                "target": "13",
                "label": "e0-13",
                "weight": 10
                },
                {
                "source": "0",
                "target": "14",
                "label": "e0-14",
                "weight": 2
                },
                {
                "source": "0",
                "target": "15",
                "label": "e0-15",
                "weight": 0.5
                },
                {
                "source": "0",
                "target": "16",
                "label": "e0-16",
                "weight": 0.8
                },
                {
                "source": "2",
                "target": "3",
                "label": "e2-3",
                "weight": 1
                },
                {
                "source": "4",
                "target": "5",
                "label": "e4-5",
                "weight": 1.4
                },
                {
                "source": "4",
                "target": "6",
                "label": "e4-6",
                "weight": 2.1
                },
                {
                "source": "5",
                "target": "6",
                "label": "e5-6",
                "weight": 1.9
                },
                {
                "source": "7",
                "target": "13",
                "label": "e7-13",
                "weight": 0.5
                },
                {
                "source": "8",
                "target": "14",
                "label": "e8-14",
                "weight": 0.8
                },
                {
                "source": "9",
                "target": "10",
                "label": "e9-10",
                "weight": 0.2
                },
                {
                "source": "10",
                "target": "14",
                "label": "e10-14",
                "weight": 1
                },
                {
                "source": "10",
                "target": "12",
                "label": "e10-12",
                "weight": 1.2
                },
                {
                "source": "11",
                "target": "14",
                "label": "e11-14",
                "weight": 1.2
                },
                {
                "source": "12",
                "target": "13",
                "label": "e12-13",
                "weight": 2.1
                },
                {
                "source": "16",
                "target": "17",
                "label": "e16-17",
                "weight": 2.5
                },
                {
                "source": "16",
                "target": "18",
                "label": "e16-18",
                "weight": 3
                },
                {
                "source": "17",
                "target": "18",
                "label": "e17-18",
                "weight": 2.6
                },
                {
                "source": "18",
                "target": "19",
                "label": "e18-19",
                "weight": 1.6
                }
            ]
        }

        const miniMap = new G6.Minimap({
            size: [100,100],
            className: 'minimap',
            type: 'delegate',
        })

        // const imageMinimap = new G6.ImageMinimap({
        //     width: 100,
        //     graphImage: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
        // })

        const grid = new G6.Grid();

        const graph = new G6.Graph({
            container: 'mountNode',
            // fitView: true,
            // fitViewPadding: [20, 40, 20, 40],
            fitCenter: true,
            width: 1000,
            height: 800,
            animate: true,
            layout: {
                type: 'force',
                preventOverlap: true,
                linkDistance: 200,
            },
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node',
                {
                    type: 'tooltip',
                    formatText(model){
                        const text = `
                            label: ${model.label}</br>
                            class: ${model.class}
                        `;
                        return text;
                    }
                },
                {
                    type: 'edge-tooltip',
                    formatText(model){
                        const text = `
                            label: ${model.label}</br>
                            source: ${model.source}</br>
                            target: ${model.target}
                        `;
                        return text;
                    }
                }
                ],
            },
            nodeStateStyles: {
                click: {
                    stroke: 'purple',
                    lineWidth: 3
                },
                hover: {
                    fill: 'lightblue',
                }
            },
            edgeStateStyles: {
                click: {
                    stroke: 'red',
                }
            },
            defaultNode: {
               size: 30,
               linkPoints: {
                    top: true,
                    left: true,
                    right: true,
                    bottom: true,
                    leftBottom: true,
                    rightBottom: true,
                    size: 5,
                    fill: '#fff',
               },
               icon: {
                   show: true,
                   width: 25,
                   height: 25,
               },
               labelCfg: {
                   style: {
                       fill: 'white',
                   }
               },
               style: {
                    fill: 'skyblue',
                    stroke: 'pink',
                    lineWidth: 2
               }
            },
            defaultEdge: {
                labelCfg: {
                    autoRotate: true,
                },
            },
            plugins: [miniMap, grid]
        });

        mockData.nodes.forEach(node => {
            switch(node.class) {
                case 'c0':
                    node.type = 'circle';
                    break;
                case 'c1':
                    node.type = 'star';
                    node.size = 30;
                    break;
                case 'c2':
                    node.type = 'diamond';
                    node.size = [40,30];
                    break;
            }
        });

        mockData.edges.forEach(edge => {
            edge.type = 'cubic-horizontal';
            if(!edge.style) {
               edge.style = {};
            }
            edge.style.stroke= 'grey';
            edge.style.opacity= 0.6;
            edge.style.lineWidth = edge.weight;

            edge.style.endArrow = {
                path: G6.Arrow.vee(10,15,0),
                d: 5,
                fill: 'grey'
            };
            // edge.style.startArrow = true;
        })
        
        graph.on('node:mouseenter', (e)=>{
            const node = e.item;
            graph.setItemState(node,'hover',true);
        })

        graph.on('node:mouseleave', (e)=>{
            const node = e.item;
            graph.setItemState(node,'hover', false);
        })

        graph.on('node:click', (e)=>{
            const clickNodes = graph.findAllByState('node', 'click');
            clickNodes.forEach(node=>{
                graph.setItemState(node,'click',false);
            })
            const node = e.item;
            graph.setItemState(node,'click',true);
        })

        graph.on('edge:click',(e)=>{
            const clickEdges = graph.findAllByState('edge', 'click');
            clickEdges.forEach(edge=>{
                graph.setItemState(edge,'click', false);
            })
            const edge = e.item;
            graph.setItemState(edge,'click', true);
        })

        graph.data(mockData);
        graph.render();
	</script>
</body>

</html>