知识图谱html页面

飞

于 2022-12-07 21:44:31 发布

阅读量546

点赞数 1

分类专栏：笔记 html 文章标签：知识图谱人工智能

本文链接：https://blog.csdn.net/qq_38389533/article/details/128227485

版权

笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>

<body>
    <div id='cxk'></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.5.0/dist/g6.min.js"></script>
    <script>
        const data = {
            nodes: [
                {
                    id: 'node1',
                    label: '向量计算',
                    type: 'circle',
                    mi: '未掌握该技能',
                    zi: '向量计算描述',
					flag: 'b',
					
                },
				
                {
                    id: 'node2',
                    label: '矩阵加减',
                    type: 'circle',
					mi: '掌握该技能',
                    zi: '矩阵的加减运算',
					flag: 'a',
                }
				,
				
                {
                    id: 'node3',
                    label: '加减法',
                    type: 'circle',
					mi: '未掌握该技能',
                    zi: '加减法',
					flag: 'b',
                }
            ],
            edges: [
                {
                    source: 'node1',
                    target: 'node2',
                    label: '学会skill才能学会skill2',
                },
				{
                    source: 'node1',
                    target: 'node3',
                    label: '学会skill才能学会skill2',
                }
				,
				{
                    source: 'node2',
                    target: 'node3',
                    label: '学会skill才能学会skill2',
                }
            ],
        };
        const graph = new G6.Graph({
            container: 'cxk',
            width: 1800,
			fitCenter: true,
            height: 800,
            //fitView: true,
            //fitViewPadding: [20, 40, 50, 20],
            defaultEdge: {
                type: 'cubic',
                color: 'blue',
                lineWidth: 12,
				style: {
				  endArrow: true,
				  lineWidth: 2,
				  stroke: '#666'
				},
                labelCfg:{
                    style:{
                        fontSize:20,
                    },
                },
            },
            defaultNode:{
                size:80,
                style: {
                    fill: '#bae637',
                    stroke: '#eaff8f',
                    lineWidth: 5,
                },
                linkPoints: {
                    top: true,
                    bottom: true,
                    left: true,
                    right: true,
                    fill: 'skyblue',
                    size: 5,
                },
                labelCfg:{
                    style:{
                        fontSize:25,
                        fontFamily:'楷体',
                        fontWeight:1000,
                    },
                },
            },
        layout: {
          type: 'force', 
          linkDistance: 400, 
          preventOverlap: true, 
          nodeSpacing:20,
        },
            modes: {
                default: [
                    {
                        type: 'drag-node',
                    },
                    {
                        type: 'zoom-canvas',

                    },
                    {
                        type: 'activate-relations',
                    },
                    {
                        type: 'tooltip',
                        formatText(model) {
                            return '名称：' + model.label + '<br/>描述：' + model.mi;
                        },
                        offset: 15,
                    },
                    {
                        type: 'edge-tooltip',
                        formatText(model) {
                            return model.label;
                        },
                        offset: 15,
                    },
                    {
                        type: 'brush-select',
                    },
                ],
            },
            nodeStateStyles: {
                hover: {
                    fill: 'lightsteelblue',
                },
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            edgeStateStyles: {
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
        });

        graph.on('node:mouseenter', e => {
            const nodeItem = e.item; 
            graph.setItemState(nodeItem, 'hover', true); 
        });
        graph.on('node:mouseleave', e => {
            const nodeItem = e.item;
            graph.setItemState(nodeItem, 'hover', false); 
        });
        graph.on('node:click', e => {
            const clickNodes = graph.findAllByState('node', 'click');
            clickNodes.forEach(cn => {
                graph.setItemState(cn, 'click', false);
            });
            const nodeItem = e.item; 
            graph.setItemState(nodeItem, 'click', true);
        });
        graph.on('edge:click', e => {
            const clickEdges = graph.findAllByState('edge', 'click');
            clickEdges.forEach(ce => {
                graph.setItemState(ce, 'click', false);
            });
            const edgeItem = e.item; 
            graph.setItemState(edgeItem, 'click', true); 
        });
		
		// 以下是重点
		graph.node(node => {
		  if (node.flag === 'b') {
			return {
			  style:{
				  fill: '#fff',
				  stroke: '#ea7171'
				}
			  }
			}
			return {
			  style: {
				fill: '#2db7f5',
				stroke: 'green'
			  }
			}
		});
        graph.data(data);
        graph.render();
        main();
    </script>
    <style>
        .g6-tooltip {
            padding: 10px 6px;
            color: rgb(224, 28, 28);
            background-color: rgba(224, 223, 152, 0.9);
            border: 1px solid #000000;
            border-radius: 4px;
        }
    </style>
</body>

</html>