关系扩线

提示

在关系数据分析过程中，经常会遇到关系扩线的操作，通过某一个节点查找他的关联关系，动态的将查询到的关系数据追加到当前图上，从而实现一步步的数据线索探查，由点扩面的深入分析。

关系扩线的要求

• 不影响画布中当前已展示的数据
• 新增数据需要摆放在合理的空间位置上，尽量避免交叉遮挡

数据扩展接口

组件库提供了动态数据添加接口 activeAddData(centerNode, incrementData, layoutType, config) 来对新查询到的数据进行合并和新增。

参数	参数名	说明
centerNode	中心节点	扩展数据的中心节点
incrementData	关系数据	标准格式的关系数据，如：{nodes:[],links:[]}
layoutType	布局类型	默认：fastForce
config	扩展配置	扩展的配置，需要指定业务系统定义节点大小，扩展区域最小半径， 如：{nodeRadius: 30,minCircleRadius: 150}

关系扩展应用示例

let graphVis = new GraphVis({
    container:document.getElementById('graph-container'), 
    licenseKey:'licensekey' //授权license
});

//注册节点双击事件
graphVis.registEventListener('node','dblClick',function(event,node){
    var searchData = generateData(node); //模拟服务端数据查询结果
    graphVis.activeAddData(node,searchData,'fastForce',{nodeRadius: 40,minCircleRadius: 150});//动态追加数据
});

const demoData = {
    nodes:[
        {id:1000,label:'节点一',y:300,x:200},
        {id:2000,label:'节点二',y:100,x:400},
        {id:3000,label:'节点三',y:300,x:600},
        {id:4000,label:'节点四',y:100,x:800},
        {id:5000,label:'节点五',y:300,x:1000}
    ],
    links:[
        {id:'e-10',source:1000,target:2000,label:'关系一'},
        {id:'e-20',source:2000,target:3000,label:'关系二'},
        {id:'e-30',source:3000,target:4000,label:'关系三'},
        {id:'e-40',source:4000,target:5000,label:'关系四'},
        {id:'e-50',source:4000,target:2000,label:'关系A'},
        {id:'e-60',source:3000,target:1000,label:'关系B'},
        {id:'e-70',source:5000,target:3000,label:'关系A'}
    ]
};
graphVis.addGraph(demoData); //批量绘图
graphVis.setZoom('auto');

//模拟服务端查询关系数据
function generateData(node){
    var sourceId = node.id;

    var nodeNum = Math.round(Math.random()*50);
    var newNodes = [];
    var newLinks = [];
    for(var i=0;i<nodeNum;i++){
        var nodeId = Math.round(Math.random()*1000000)+1;
        newNodes.push({id:nodeId,label:'点'+nodeId});

        var edgeId = Math.round(Math.random()*1000000)+1;
        newLinks.push({
            id:'e-'+edgeId,source:sourceId,target:nodeId,label:edgeId
        });
    }
    return {nodes:newNodes,links:newLinks};
} 

关系扩线实例图