GraphVis: 应用于知识图谱可视化，复杂网络可视化分析，关系图可视化，网络拓扑图，布局算法，社区发现算法等可视化场景。可以作为 network，graph，knowlegegraph，neo4j，gephi等扩展工具可视化分析web版本的核心库。

您所在的位置：网站首页 › 关系图谱在线查询网站 › GraphVis: 应用于知识图谱可视化，复杂网络可视化分析，关系图可视化，网络拓扑图，布局算法，社区发现算法等可视化场景。可以作为 network，graph，knowlegegraph，neo4j，gephi等扩展工具可视化分析web版本的核心库。

GraphVis: 应用于知识图谱可视化，复杂网络可视化分析，关系图可视化，网络拓扑图，布局算法，社区发现算法等可视化场景。可以作为 network，graph，knowlegegraph，neo4j，gephi等扩展工具可视化分析web版本的核心库。

2023-08-07 06:31| 来源: 网络整理| 查看: 265

GraphVis 一个较为完善的图可视化引擎，配置化实现图可视化应用效果，并支持自定义开发模式，内置实现了多种图的布局算法，社区发现算法，路径分析算法，方便开发者快速构建自己的图可视化分析应用。

主页：www.graphvis.cn

开发文档：

GraphVis V1版开发指南

V1版在线开发示例示例代码可直接复制至本地运行。

GraphVis V2授权版开发文档（注：完善的开发文档和应用示例模板，可快速构建图谱可视化产品应用）

V2版在线开发示例提供了更丰富的应用功能和图表类型，配置化实现图谱可视化

更多效果图参见：GraphVis可视化模板

大数据可视化性能测试：大量数据可视化性能测试

如果项目帮到了您，请加个star,我会继续努力完善、更新... 如有定制化需求，合作请联系作者项目核心价值快速高效的可视化引擎，支持大量数据的交互式操作。集成大量的经典布局算法，如：树形结构类，力导向布局类，圆形类，层级关系类、节点避免重叠等支持经典社区划分算法，如：chineseWisper, lovin,newman等完整的在线应用实例，完善的开发文档活跃的交流群体，持续优化改进的可视化效果和交互，让GraphVis在未来一定会成为图数据可视化领域的一个活跃分子。欢迎有兴趣的同学们参与进来，共同把GraphVis打造成为图数据可视化分析领域的通用解决方案，服务更多的开发者。快速使用界面原生方式引用当前组件包支持两种引用方式：页面标签直接引用 require异步加载引用页面标签直接引用 requirejs(['visgraph','layoutFactory','clusterFactory'],function(VisGraph,layoutFactory,clusterFactory) {//do something}); GraphVis实现图数据的可视化只需以下三步即可，无需深入的基础知识也可快速使用： 1、后台服务按照格式组织数据，如： var data = { nodes:[{id:'1',label:'刘备',type:'男',properties:{age:50}}, {id:'2',label:'关羽',type:'男'}, {id:'3',label:'张飞',type:'男'}], links:[{source:'1',target:'2',label:'二弟',properties:{other:'other prop'}}, {source:'1',target:'3',label:'三弟'}] }; 2、界面添加图层包裹元素，如： 3、初始化关系图 let visGraph = new VisGraph(document.getElementById('graph-panel')); visGraph.drawData(data);//绘制图完成支持自定义配置，实现个性化需求及交互详细配置如下,可选择性配置需要的参数，不需要无需配置 let visGraph = new VisGraph(document.getElementById(visDomId), { node: { //节点的默认配置 label: { //标签配置 show: true, //是否显示 color: '50,50,50', //字体颜色 font: 'bold 13px 微软雅黑', //字体大小及类型 wrapText: false, //节点包裹文字 textPosition: 'Middle_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right //textOffsetX:-24,//文字横向偏移量 //textOffsetY:-24,//文字纵向偏移量 //backgroud:'255,255,255',//文字背景色 //borderWidth:0,//文字边框宽度 //borderColor:'250,250,250'//文字边框颜色 }, shape: 'circle', //节点形状 circle,rect,square,ellipse,triangle,star,polygon,text //image:'images/T1030001.svg',//节点图标(设置后节点显示为圆形图标) color: '20,20,200', //节点颜色 borderColor: '255,255,255', //边框颜色 borderWidth: 2, //边框宽度, borderRadius: 0, //边框圆角大小 lineDash: [0], //边框虚线间隔,borderWidth>0时生效 alpha: 1, //节点透明度 size: 60, //节点默认大小 width: 80, //节点的长度(shape为rect生效) height: 40, //节点的高度(shape为rect生效) selected: { //选中时的样式设置 borderColor: '50,120,230', //选中时边框颜色 borderAlpha: 1, //选中时的边框透明度 borderWidth: 8, //选中是的边框宽度 showShadow: false, //是否展示阴影 shadowColor: '50,100,250' //选中是的阴影颜色 }, onClick: function(event, node) { //节点点击事件回调 console.log('点击节点----[' + node.id + ':' + node.label + ']'); }, ondblClick: function(event, node) { console.log('双击节点'); }, //节点双击事件 onMouseDown: function(event, node) { console.log('鼠标按下节点'); }, //节点的鼠标按下事件 onMouseUp: function(event, node) { console.log('鼠标弹起节点'); }, //节点的鼠标弹起事件 onMouseOver: function(event, node) { console.log('鼠标移入节点'); }, //节点的鼠标划过事件 onMouseOut: function(event, node) { console.log('鼠标移出节点'); }, //节点的鼠标划出事件 onMousedrag: function(event, node) { console.log('拖动节点'); } //节点的拖拽移动事件 }, link: { //连线的默认配置 label: { //连线标签 show: true, //是否显示 color: '50,50,50', //字体颜色 font: 'normal 12px 微软雅黑' //字体大小及类型 }, lineType: 'direct', //连线类型,direct,curver,vlink,hlink,bezier,vbezier,hbezier colorType: 'defined', //连线颜色类型 source:继承source颜色,target:继承target颜色 both:用双边颜色，defined:自定义 color: '120,120,120', //连线颜色 alpha: 0.8, // 连线透明度 lineWidth: 2, //连线宽度 lineDash: [0], //虚线间隔样式如：[5,8] showArrow: true, //显示箭头 selected: { //选中时的样式设置 color: '250,50,50', //选中时的颜色 alpha: 1, showShadow: false, //是否展示阴影 shadowColor: '250,40,30' //选中连线时的阴影颜色 }, onClick: function(event, link) { //连线点击事件回调 console.log('click link---[' + link.source.id + '-->' + link.target.id + ']'); }, ondblClick: function(event, link) {} //连线的双击回调事件 }, highLightNeiber: false, //相邻节点高度标志 wheelZoom: 0.8, //滚轮缩放开关，不使用时不设置[0,1] noElementClick: function(event) { //画布空白处的点击事件 console.log('点击了空白区域'); }, rightMenu: { nodeMenu: NodeRightMenu, //节点右键菜单配置 linkMenu: LinkRightMenu // 连线右键菜单配置 }, layout: { //开启内置力导向布局,不配置时不启动 type: 'force', options: { friction: 0.9, linkDistance: 150, linkStrength: 0.05, charge: -150, gravity: 0.01, noverlap: false } } }); 应用效果图