GraphVis介绍

提示

GraphVis是一个完整的图可视化分析WEB端组件库，其定义了一套标准数据规范，能够灵活的在业务中进行集成使用，具有高性能的可视化和交互能力，提供有丰富的布局算法和常用的图分析算法，可用于快速构建图可视化分析应用。

特点

• 具备高效的数据可视化渲染能力。
• 基于可视化元素提供有丰富的交互事件。
• 右键菜单的实现规范定义。
• 定义了一套图数据可视化所需的标准数据结构。
• 多种布局算法，提供有动画和webworker的异步计算两种模式，参数自定义配置。
• 多种图分析算法，如：中心性分析、路径分析、聚类分析等。
• 易用，能够大幅的降低产品开发迭代所需的研发成本。

注意

优势：基于组件库提供的能力，业务应用只需组织标准数据格式，调用相应功能接口即可快速构建自己的图可视化分析应用类产品功能。

使用 GraphVis

• 快速使用：页面引用 graphvis.min.js 后，使用如下代码即可实现数据可视化展示

<!-- 引入图可视化客户端js库文件,全局界面均可直接使用GraphVis对象 -->
<script src="static/libs/graphvis.min.js"></script>

// 参数：初始化配置
let graphVis = new GraphVis({
    container:document.getElementById('divId'), //画布层
    licenseKey:'licensekey', //授权license
    config:{} //可视化统一配置(查看下方详细配置说明)
});

//其中style是私有样式属性（可空）,properties是业务属性，存放业务任意数据（可空）
graphVis.addGraph({
    nodes:[
        {id:1000,label:'节点一',type:'type1',style:{},properties:{} },
        {id:2000,label:'节点二',type:'type2',style:{},properties:{} }
    ],
    links:[
        {id:'e1',source:1000,target:2000,label:'关系',type:'typea',style:{},properties:{} }
    ]
});
    

初始化统一配置定义

• 客户端初始化时，可以统一配置默认的节点和连线样式，配置内容格式如下：

{
    node: { //节点的默认配置
        label: { //标签配置
            show: true, //是否显示
            color: '50,50,50', //字体颜色
            font: 'normal 14px Arial', //字体大小及类型
            textPosition: 'Bottom_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right
            textOffsetX: 0, //文字横向偏移量
            textOffsetY: 0, //文字纵向偏移量
            background: null //文字背景色
        },
        shape: 'circle', //节点形状 circle,star,polygon,square
        size: 60, //节点半径大小
        color: '30,160,250', //节点颜色
        borderColor:'30,100,250',//边框颜色
        borderWidth: 0, //边框宽度
        tagColor:'230,30,30',//标记的颜色
        selected: { //选中时的样式设置
            borderColor: '50,50,230', //选中时边框颜色
            borderAlpha: 1, //选中时的边框透明度
            borderWidth: 5, //选中是的外部边框宽度
            showShadow: false, //是否展示阴影
            shadowColor: '80,160,240', //选中是的阴影颜色
            shadowBlur: 10 //阴影的范围大小
        }
    },
    link: { //连线的默认配置
        label: { //连线标签
            show: true, //是否显示
            color: '20,20,20', //字体颜色
            font: 'normal 13px Arial', //字体大小及类型
            background: null //文字背景色(有背景时上线居中)
        },
        lineType: 'straight', //连线类型,straight,curver,vlink,hlink,vbezier,hbezier
        color: '120,110,110', //连线颜色
        lineWidth: 2, //连线宽度
        showArrow: true, //显示连线箭头
        arrowType:'triangle',//箭头样式arrow,triangle
        selected: { //选中时的样式设置
            color: '50,50,230' //选中时的颜色
        }
    },
    highLightNeiber: false, //相邻节点高度标志
    wheelZoom: 0.9, //滚轮缩放开关，不使用时不设置
    selectBox:{ //框选区域的颜色配置
        color:'10,10,225', //框的颜色
        alpha: 0.1 //框的透明度
    }
}

标准数据Schema定义

• 标准数据格式包含 nodes(节点集合) 和 links(关系连线集合)

节点属性

属性名	类型	是否必须	说明
id	String	是	节点唯一性标识，不可重复
label	String	是	节点显示文字名称
type	String	是	节点分类类型，如：人、事、物、地、案件等类型定义值
style	Object	否	节点属性定义，一般是节点个性化的样式数据设置，会覆盖统一配置的样式
properties	Object	否	节点的业务属性，业务应用需要附加在节点上的额外信息，用于业务交互处理

连线属性

属性名	类型	是否必须	说明
id	String	是	连线的唯一性标识，不可重复
source	String	是	起始节点ID
target	String	是	目标节点ID
label	String	否	连线显示的关系名称
type	String	否	连线业务类型，如：通话、亲人、朋友、同住、同行等类型定义值
style	Object	否	连线属性定义，一般是连线个性化的样式数据设置，会覆盖统一配置的样式
properties	Object	否	连线的业务属性，业务应用需要附加在连线上的额外信息，用于业务交互处理

数据格式示例

{
    nodes: [
        { id: 1000, label: '112222333',type:'weixin',style:{y: 300, x: 200} },
        { id: 2000, label: '58877554', type:'qq',style:{y: 100, x: 400,image:'static/icons/qq.png'} },
        { id: 3000, label: '6554778', type:'douyin',style:{y: 300, x: 600} },
        { id: 4000, label: '吴谋凡', type:'people',tags:['重'],style:{y: 100, x: 800,tagColor:'30,30,220'}},
        { id: 5000, label: '涉案人\n黄某某(新街口)',type:'people',tags:['毒','盗'],style:{ y: 300, x: 1000}},
        { id: 6000, label: '13855465577', type:'phone',style:{y: 300, x: 1400} },
        { id: 7000, label: '15968975545',type:'phone',style:{y: 100, x: 1200}},
        { id: 8000, label: '某某重点案件',type:'anjian',style:{ y: 500, x: 800}},
        { id: 9000, label: '新街口某某小区', type:'position',style:{y: 700, x: 800,image:'static/icons/position.png'} }
    ],
    links: [
        { id: 'e-10', source: 1000, target: 2000,type:'vitual', label: '虚拟关系',style:{strokeColor:'220,220,120'} },
        { id: 'e-20', source: 2000, target: 3000,type:'vitual', label: '虚拟关系'},
        { id: 'e-30', source: 3000, target: 4000,type:'vitual', label: '虚拟关系' },
        { id: 'e-40', source: 4000, target: 5000,type:'friend', label: '好友'},
        { id: 'e-50', source: 4000, target: 2000,type:'vitual', label: '使用',style:{lineDash:[5,8,5]} },
        { id: 'e-60', source: 3000, target: 1000,type:'vitual', label: '授权登录',style:{strokeColor:'220,20,20'}},
        { id: 'e-70', source: 5000, target: 3000,type:'vitual', label: '发布视频'},
        { id: 'e-80', source: 5000, target: 6000,type:'vitual', label: '拥有',style:{lineWidth:6}},
        { id: 'e-90', source: 6000, target: 7000,type:'vitual', label: '拨打',},
        { id: 'e-100', source: 7000, target: 4000,type:'vitual', label: '所属'},
        { id: 'e-110', source: 1000, target: 8000,type:'relate', label: '涉案'},
        { id: 'e-120', source: 6000, target: 8000,type:'relate', label: '涉案'},
        { id: 'e-130', source: 8000, target: 9000,type:'relate', label: '案发地'}
    ]
}

可视化效果