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 = [{ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0