cytoscape实现一个图谱关系图效果代码-html代码-BFW代码库

cytoscape实现一个图谱关系图效果代码

代码语言：html

所属分类：图表

代码描述：cytoscape实现一个图谱关系图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cytoscape.min.js"></script>


    <script type='text/javascript'>
        document.addEventListener('DOMContentLoaded', function() {
            var dataSimple = {
                nodes: [{
                    data: {
                        id: '1',
                        name: '何鸿燊',
                        img: '//repo.bfw.wiki/bfwrepo/image/5e0c6f70b0216.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
                        role:"主管",
                    },
                },
                    {
                        data: {
                            id: '2',
                            name: '梁安琪',
                            img: '//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
                              role:"行政",
                        },
                    },
                    {
                        data: {
                            id: '3',
                            name: '何猷君',
                            img: '//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
                              role:"财务",
                        },
                    },
                    {
                        data: {
                            id: '4',
                            name: '何超欣',
                            img: '//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90',
                              role:"经理",
                        },
                    },
                ],
                edges: [{
                    data: {
                        id: '1-2',
                        name: '情侣',
                        source: '1',
                        target: '2',
                    },
                },
                    {
                        data: {
                            id: '2-3',
                            name: '母子',
                            source: '2',
                            target: '3',
                        },
                    },
                    {
                        data: {
                            id: '1-4',
                            name: '父女',
                            source: '1',
                            target: '4',
                        },
                    },
                    {
                        data: {
                            id: '3-4',
                            name: '兄妹',
                            source: '3',
                            target: '4',
                        },
                    },
                ]
            };
            var styleSimple = [{
       .........完整代码请登录后点击上方下载按钮下载查看