图说数据【图可视化分析】工具组件

随着数据分析工作的深入，越来越多的行业和企业都在构建自己领域的知识图谱，知识图谱的分析工作除了算法之外，还需要好的可视化工具来辅助进行展现和分析，以帮助分析人员更好的理解和发现数据价值，呈现数据之美。
图分析的应用场景几乎适用于任何行业，多见于以下应用方向：

  1. 知识图谱可视化
  2. 网络拓扑分析
  3. 社交网络分析
  4. 情报、引文分析
  5. 反恐及安全领域
  6. 保险、金融领域

基于对图分析方向工作的需要，发现好的产品收费普遍很贵，免费的几乎没有，所以决定自己开发一套图的可视化分析工具，能够快速构建自己的可视化应用。
当前核心组件主要包括以下部分：

  1. 可视化展示部分
  2. 布局算法
  3. 社区划分算法
  4. 常用分析算法

使用说明

目前组件已开源，您可以自由使用，如果有什么好的意见和建议，欢迎交流讨论，一起将GraphVis做的更好。

目前有三个独立的组件包：

  1. 可视化展示组件：用于构建图可视化基础环境，提供添加点、边，设置各种效果样式的接口
  2. 布局算法组件：提供多种图的布局算法，可以无缝与可视化组件组合使用，也可以自己开发可视化部分，集成该算法库。
  3. 社区发现算法组件：提供多种经典的社区发现算法，使用简单方便，基于可视化，使用不同颜色划分不同的社区、团体、群组，可清晰的理解图含义。

当前组件包支持两种引用方式：

  1. 页面标签直接引用

    <script type="text/javascript" src="../visgraph-x.x.x.min.js"></script>

  2. require异步加载引用 页面标签直接引用

    requirejs(['visgraph','layoutFactory','clusterFactory'],function(VisGraph,layoutFactory,clusterFactory) {//do something});

组件使用方式代码示例 

//图数据格式
var graphData = {
    nodes:[{id:'1',label:'张无忌',type:'男',size:50,x:50,y:200},
          {id:'2',label:'赵敏',type:'女',size:40,x:250,y:200},
          {id:'3',label:'周芷若',type:'女',size:40,x:450,y:200}],
    links:[{source:'1',target:'2',label:'喜欢',weight:10},
          {source:'1',target:'3',label:'爱',weight:10}]
};

//一、原生js使用方式
//可视化加载数据
var visgraph = new VisGraph(document.getElementById('container'),null); //需要指定画布的包裹元素id
visgraph.drawData(graphData);

//动态布局
var layout=new layoutFactory(visgraph.getGraphData()).createLayout('fr');
layout.initAlgo(); //初始化布局参数
layout.resetConfig(config);//重新设置布局参数
var i=0;
while(i++<1000){
    layout.runLayout(); //执行1000次布局
}


//二、requirejs 使用方式（与上面方法二选一）
requirejs(['visgraph','layoutFactory'],function(VisGraph,layoutFactory) {
    //初始化图，加载图数据
    var visgraph = new VisGraph(document.getElementById('container'),null); //需要指定画布的包裹元素id
    visgraph.drawData(graphData);

    //动态布局
    var layout=new layoutFactory(visgraph.getGraphData()).createLayout('fr');
    layout.initAlgo(); //初始化布局参数
    layout.resetConfig(config);//重新设置布局参数
    layout.runLayout();//执行布局

    var loopName=null;
    function loop(){
        cancelAnimationFrame(loopName);
        layout.runLayout();
        loopName = requestAnimationFrame(loop);               
    };
    loopName = requestAnimationFrame(loop);
});