这个老哥感觉是全博客中写的比较全的了
效果图：
<template> <div style="width: 100%;height: 100%;"> <div id="MainCy" style="width: 100%;height: 100%;"></div> <div id="MainD3" scale="1" class="no-padding tp-container">111111 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"> </svg> </div> </div> </template> <script> export default { mounted() { /** 网页当前状态判断 (解决没布局完就切换页面造成点聚集在一起)*/ var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // 声明变量 var cy; var id; var activeNode; var graphDatas; //接口返回的原始数据 var _rootData,_rootNode; //原始数据转换成的graph数据,根节点数据 var _COLOR = { node : {person: '#FD485E',company:'#4ea2f0',current:'#ff9e00'}, border : {person: '#FD485E',company:'#128BED',current:'#EF941B'}, line: {invest:'#fd485e',employ:'#4ea2f0',legal:'#4ea2f0'} }; var _currentKeyNo,_companyRadius = 35,_personRadius = 15,_circleMargin = 10,_circleBorder = 3, _layoutNode = {}, _isFocus = false; var _maxChildrenLength = 0; /** 解决浏览器标签切换排列问题 */ var _isNeedReload = false; var _isGraphLoaded = false; document.addEventListener(visibilityChange, function() { // console.log(document[state]); if(document[state] == 'visible'){ if(_isNeedReload){ $("#MainCy").html(''); $('#TrTxt').removeClass('active'); _currentKeyNo = "e6b98b6db9ac8bbee4906e92fc01e4c9"; getData(_currentKeyNo); } document.title = 'hidden-not-loaded' } else { if(!_isGraphLoaded){ _isNeedReload = true; } } }, false); /** end 解决浏览器标签切换排列问题 */ $(document).ready(function () { // 获取数据 _currentKeyNo = "e6b98b6db9ac8bbee4906e92fc01e4c9"; getData(_currentKeyNo); // 监听容器的滚动事件 document.getElementById("MainCy").addEventListener("wheel", function(e){ // console.log(e.wheelDelta); var type = 1; if(e.wheelDelta > 0){ type = 1; }else { type = 2; } maoScale(type); }); }); function getData(_currentKeyNo){ // 模拟数据 graphDatas = [{ graph: { nodes:[ { id:"75351209", labels:["Company"], properties:{ econKind:"有限责任公司(法人独资)1", hasImage:false, keyNo:"e6b98b6db9ac8bbee4906e92fc01e4c9", name:"北京兰贝斯科技有限公司1", registCapi:"1000.000", status:"在业", } }, { id:"36341010", labels:["Person"], properties:{ keyNo:"ea5e4e0a1ddfaf97ffa6720af99e54ea", name:"张三", registCapi:"1000.000", role:"监事", } }, { id:"363410102", labels:["Company"], properties:{ keyNo:"ea5e4e0a1ddfaf97ffa6720af99e54ea1", name:"张三1", registCapi:"1000.000", role:"监事1", } }, { id:"363410103", labels:["Person"], properties:{ keyNo:"ea5e4e0a1ddfaf97ffa6720af99e54ea2", name:"张三2", registCapi:"1000.000", role:"监事2", } } ], relationships: [ { id:"62566458", startNode:"75351209", endNode:"36341010", type:"INVEST", properties: { role:"自然人股东", shouldCapi:50, stockPercent:50 } }, { id:"363403", startNode:"363410103", endNode:"36341010", type:"INVEST", properties: { role:"自然人股东", shouldCapi:50, stockPercent:50 } }, { id:"3634031", startNode:"363410103", endNode:"363410102", type:"INVEST", properties: { role:"自然人股东", shouldCapi:111, stockPercent:500 } } ], }, }]; _rootData = getRootData(graphDatas); domUpdate(_rootData); } // 图谱、筛选面板更新 function domUpdate(graphData) { console.log(graphData); getD3Position(graphData); setTimeout(function () { drawGraph(transformData(graphData)); },500); selPanelUpdateList(graphData.nodes,graphData.links,true); } // ---------------------------- domUpdate 调用的方法 ---- Begin function getD3Position(graph) { getLayoutNode(graph); function filterLinks1(graph) { // 筛选用于布局的links var layoutLinks = []; for(var i = 0; i < graph.links.length; i++){ var link = graph.links[i]; var sourceLevel = link.sourceNode.layout.level; var targetLevel = link.targetNode.layout.level; var sourceNode = link.sourceNode; var targetNode = link.targetNode; // sourceNode.layout.isSetLink = false; // targetNode.layout.isSetLink = false; // if(!sourceNode.layout.isSetLink && !targetNode.layout.isSetLink){ if((sourceLevel == 1 && targetLevel == 2) || (sourceLevel == 2 && targetLevel == 1) ){ // sourceNode.layout.isSetLink = true; // targetNode.layout.isSetLink = true; layoutLinks.push(link); } if((sourceLevel == 2 && targetLevel == 3) || (sourceLevel == 3 && targetLevel == 2) ){ // sourceNode.layout.isSetLink = true; // targetNode.layout.isSetLink = true; layoutLinks.push(link); } // } } layoutLinks.forEach(function (link,i) { if(link.targetNode.layout.level == 3){ layoutLinks.forEach(function (alink,j) { if(alink.linkId != link.linkId && (alink.targetNode.nodeId == link.targetNode.nodeId || alink.sourceNode.nodeId == link.targetNode.nodeId)){ layoutLinks.splice(j,1); } }) } if(link.sourceNode.layout.level == 3){ layoutLinks.forEach(function (alink,j) { if(alink.linkId != link.linkId && (alink.targetNode.nodeId == link.sourceNode.nodeId || alink.sourceNode.nodeId == link.sourceNode.nodeId)){ layoutLinks.splice(j,1); } }) } }) return layoutLinks; } function filterLinks2(graph) { // 筛选用于布局的links var layoutLinks = []; for(var i = 0; i < graph.links.length; i++){ var link = graph.links[i]; var sourceLevel = link.sourceNode.layout.level; var targetLevel = link.targetNode.layout.level; var sourceNode = link.sourceNode; var targetNode = link.targetNode; if((sourceLevel == 1 && targetLevel == 2) || (sourceLevel == 2 && targetLevel == 1) ){ layoutLinks.push(link); } if((sourceLevel == 2 && targetLevel == 3) || (sourceLevel == 3 && targetLevel == 2) ){ layoutLinks.push(link); } } return layoutLinks; } function initD3Data(graph) { // function getIndex(val,arr) { var index = 0; for(var i = 0; i < arr.length; i++){ var obj = arr[i]; if(val == obj.nodeId){ index = i; break; } } return index; } /*封装符合d3的数据*/ for(var i = 0; i < graph.nodes.length; i++){ var node = graph.nodes[i]; node.id = node.nodeId; } for(var i = 0; i < graph.links.length; i++){ var link = graph.links[i]; link.source = getIndex(link.sourceNode.nodeId, graph.nodes) ; link.target = getIndex(link.targetNode.nodeId, graph.nodes) ; link.index = i; // } graph.layoutLinks = filterLinks1(graph); // 围绕节点最大数值 setSingleLinkNodes(graph.layoutLinks); graph.nodes.forEach(function(node,i){ if(node.layout.singleLinkChildren.length && _maxChildrenLength < node.layout.singleLinkChildren.length){ _maxChildrenLength = node.layout.singleLinkChildren.length } }) //console.log('围绕节点最大数值:' + _maxChildrenLength); } initD3Data(graph); // var width = $("#MainD3 svg").width(); var height = $("#MainD3 svg").height(); var strength = -600,distanceMax = 330,theta = 0,distance = 130,colideRadius = 35,distanceMin = 400; // 根据节点数量调节 if(graph.nodes.length < 50 ){ strength = -800;distanceMax = 400; } else if( graph.nodes.length > 50 && graph.nodes.length < 100 ){ strength = -800;distanceMax = 350;distance = 130;colideRadius = 35; } else if(graph.nodes.length > 100 && graph.nodes.length < 150){ strength = -900;distanceMax = 450; } else if (graph.nodes.length > 150 && graph.nodes.length < 200) { strength = -1000; distanceMax = 500; } else if (graph.nodes.length > 200) { strength = -1600; distanceMax = 500;theta = 0.6,distance = 100,colideRadius = 35; } // 根据围绕数量调节 if(_maxChildrenLength > 50 && _maxChildrenLength < 100){ strength = -2000; distanceMax = 500; } else if(_maxChildrenLength > 1000 && _maxChildrenLength < 2000) { strength = -4000; distanceMax = 1500; } d3.forceSimulation(graph.nodes) .force('charge', d3.forceManyBody().strength(strength).distanceMax(distanceMax).theta(theta)) .force('link', d3.forceLink(graph.layoutLinks).distance(distance)) .force('center', d3.forceCenter(width / 2, height / 2)) .force('collide', d3.forceCollide().radius(function () { return colideRadius;})) //.on('tick',ticked); } //设置符合Layout的node function getLayoutNode(graphData) { var layoutNode = { current : _rootNode, level1 : [], level2 : [], level3 : [], level4 : [], level5 : [],other:[]}; graphData.nodes.forEach(function (node,i) { switch (node.layout.level) { case 1: layoutNode.level1.push(node);break; case 2: layoutNode.level2.push(node);break; case 3: layoutNode.level3.push(node);break; case 4: layoutNode.level4.push(node);break; case 5: layoutNode.level5.push(node);break; default:layoutNode.other.push(node);break; } }); _layoutNode = layoutNode; console.log(_layoutNode) return layoutNode; } // 数据处理：设置唯一孩子 function setSingleLinkNodes(links){ function isSingleLink (nodeId,links){ var hasLinks = 0; var isSingle = true; for(var i = 0; i < links.length; i++){ var link = links[i]; if(link.targetNode.nodeId == nodeId || link.sourceNode.nodeId == nodeId){ hasLinks++; } if(hasLinks > 1){ isSingle = false; break; } } return isSingle; } // isSingleLink links.forEach(function (link,i) { if(isSingleLink(link.sourceNode.nodeId,links)){ link.targetNode.layout.singleLinkChildren.push(link.sourceNode); } if(isSingleLink(link.targetNode.nodeId,links)){ link.sourceNode.layout.singleLinkChildren.push(link.targetNode); } }); } // 绘制图谱 function drawGraph(elements) { _currentKeyNo,_companyRadius = 35,_personRadius = 15,_circleMargin = 10,_circleBorder = 3; cy = cytoscape({ container: document.getElementById('MainCy'), motionBlur: false, textureOnViewport:false, wheelSensitivity: 0, elements:elements, minZoom:0.4, maxZoom:5, zoomingEnabled: true, //是否可缩放，改为false图谱的位置会靠左不居中 userZoomingEnabled: false, //是否允许用户事件(例如鼠标轮、按下缩放)缩放图形.缩放的编程更改不受此选项的影响 -- 这里改为false,然后通过自定义事件来控制图谱的缩放 layout: { name: 'preset', componentSpacing: 40, nestingFactor:12, padding: 10, edgeElasticity:800, stop:function (e) { //解决浏览器标签切换排列问题 if(document[state] == 'hidden'){ _isNeedReload = true; // console.log('stop _isNeedReload=true'); } else { _isNeedReload = false; } setTimeout(function () { if(document[state] == 'hidden'){ _isGraphLoaded = false; console.log('stop _isGraphLoaded=false'); } else { _isGraphLoaded = true; } },1000); } }, style: [ { selector: 'node', style: { shape: 'ellipse', width: function (ele) { //当前节点有图片 if(ele.data("type") == 'Person' && _currentKeyNo == ele.data('keyNo') && ele.data('hasImage')){ return 80; } //有图片 if(ele.data('hasImage') && ele.data('type') == 'Person'){ return 60; } //普通 if(ele.data("type") == 'Company'){ return 60; } return 45; }, height: function (ele) { //当前节点有图片 if(ele.data("type") == 'Person' && _currentKeyNo == ele.data('keyNo') && ele.data('hasImage')){ return 80; } //有图片 if(ele.data('hasImage') && ele.data('type') == 'Person'){ return 60; } //普通 if(ele.data("type") == 'Company'){ return 60; } return 45; }, 'background-color': function (ele) { return ele.data('color'); }, 'background-fit': 'cover', 'background-image': function (ele) { var hasImage = ele.data('hasImage'); var keyNo = ele.data('keyNo'); var type = ele.data('type'); if(hasImage && type == 'Person'){ return '/proxyimg_'+ keyNo+'.jeg'; } else { return 'none'; } }, // 'background-image-crossorigin': 'use-credentials', 'border-color': function (ele) { return ele.data("borderColor"); }, 'border-width': function (ele) { if(ele.data('hasImage') && ele.data('type') == 'Person'){ return 3; } else { return 1; } }, 'border-opacity': 1, label: function (ele) { var label = ele.data("name"); var length = label.length; if(length <=5){ // 4 5 4排列 return label; } else if(length >=5 && length <= 9) { return label.substring(0,length - 5) + '\n' + label.substring(length - 5,length); } else if(length >= 9 && length <= 13){ return label.substring(0,4) + '\n' + label.substring(4,9) + '\n' + label.substring(9,13); } else { return label.substring(0,4) + '\n' + label.substring(4,9) + '\n' + label.substring(9,12) + '..'; } }, 'z-index-compare':'manual', 'z-index':20, color:"#fff", //'padding-top':0, 'padding':function (ele) { if(ele.data("type") == 'Company'){ return 3; } return 0; }, 'font-size':12, //'min-height':'400px', //'ghost':'yes', //'ghost-offset-x':300, //'font-weight':800, //'min-zoomed-font-size':6, 'font-family':'microsoft yahei', 'text-wrap':'wrap', 'text-max-width':60, 'text-halign':'center', 'text-valign':'center', 'overlay-color':'#fff', 'overlay-opacity':0, 'background-opacity':1, 'text-background-color':'#000', 'text-background-shape':'roundrectangle', 'text-background-opacity':function (ele) { if(ele.data('hasImage') && ele.data('type') == 'Person'){ return 0.3; } else { return 0 } }, 'text-background-padding':0, 'text-margin-y': function (ele) { //当前节点有图片 if(ele.data("type") == 'Person' && _currentKeyNo == ele.data('keyNo') && ele.data('hasImage')){ return 23; } // 有图片 if(ele.data('hasImage') && ele.data('type') == 'Person'){ return 16; } // if(ele.data("type") == 'Company'){ return 4; } return 2; }, }, }, { selector: 'edge', style: { 'line-style':function (ele) { return 'solid'; /*if(ele.data('data').obj.type == 'INVEST'){ return 'solid'; } else { return 'dashed' }*/ }, 'curve-style': 'bezier', 'control-point-step-size':20, 'target-arrow-shape': 'triangle-backcurve', 'target-arrow-color': function (ele) { return ele.data("color"); }, 'arrow-scale':0.5, 'line-color': function (ele) { //return '#aaaaaa'; return ele.data("color"); }, label: function (ele) { return ele.data("label"); }, 'text-opacity':0.8, 'font-size':12, 'background-color':function (ele) { return '#ccc'; return ele.data("color"); }, 'width': 0.3, 'overlay-color':'#fff', 'overlay-opacity':0, 'font-family':'microsoft yahei', } }, { "selector": ".autorotate", "style": { "edge-text-rotation": "autorotate" } }, { selector:'.nodeActive', style:{ /*'background-color':function (ele) { if(ele.data("category")==1){ return "#5c8ce4" } return "#d97a3a"; },*/ //'z-index':300, 'border-color': function (ele) { return ele.data("color"); }, 'border-width': 10, 'border-opacity': 0.5 } }, { selector:'.edgeShow', style:{ 'color':'#999', 'text-opacity':1, 'font-weight':400, label: function (ele) { return ele.data("label"); }, 'font-size':10, } }, { selector:'.edgeActive', style:{ 'arrow-scale':0.8, 'width': 1.5, 'color':'#330', 'text-opacity':1, 'font-size':12, 'text-background-color':'#fff', 'text-background-opacity':0.8, 'text-background-padding':0, 'source-text-margin-y':20, 'target-text-margin-y':20, //'text-margin-y':3, 'z-index-compare':'manual', 'z-index':1, 'line-color': function (ele) { return ele.data("color"); }, 'target-arrow-color': function (ele) { return ele.data("color"); }, label: function (ele) { /*if(ele.data('data').obj.type == 'INVEST'){ return 'solid'; } else { return 'dashed' }*/ return ele.data("label"); } } }, { selector:'.hidetext', style:{ 'text-opacity':0, label: function (ele) { return ''; } } }, { selector:'.dull', style:{ 'z-index':1, opacity:0.2, } }, { selector: '.nodeHover', style: { shape: 'ellipse', 'background-opacity':0.9, } }, { selector: '.edgeLevel1', style: { label: function (ele) { return ele.data("label"); }, } }, { selector: '.edgeShowText', style: { label: function (ele) { return ele.data("label"); }, } }, { selector: '.lineFixed',// 加载完成后，加载该类，修复线有锯齿的问题 style: { 'overlay-opacity':0, } }, ], }); /** * 鼠标点击节点后触发 */ cy.on('click', 'node', function(evt){ console.log(111111) if(evt.target._private.style['z-index'].value == 20) { // 非暗淡状态 _isFocus = true; var node = evt.target; highLight([node._private.data.id],cy); if(node.hasClass("nodeActive")){ activeNode = null; $('#company-detail').hide(); node.removeClass("nodeActive"); cy.collection("edge").removeClass("edgeActive"); }else{ var nodeData = node._private.data; if(nodeData.type == 'Company'){ showDetail2(nodeData.keyNo,'company_muhou3'); cy.collection("node").addClass('nodeDull'); } else { showDetail2(nodeData.keyNo,'company_muhou3','person'); cy.collection("node").addClass('nodeDull'); } activeNode = node; cy.collection("node").removeClass("nodeActive"); cy.collection("edge").removeClass("edgeActive"); node.addClass("nodeActive"); node.neighborhood("edge").removeClass("opacity"); node.neighborhood("edge").addClass("edgeActive"); node.neighborhood("edge").connectedNodes().removeClass("opacity"); } //_firstTab = false; } else { _isFocus = false; activeNode = null; cy.collection("node").removeClass("nodeActive"); $('.tp-detail').fadeOut(); cancelHighLight(); } }); /** * 鼠标按下时触发 */ cy.on('vmousedown', 'node', function(evt){ var node = evt.target; if(!_isFocus){ highLight([node._private.data.id],cy); } }); /** * 鼠标抬起/触摸结束时触发 */ cy.on('tapend', 'node', function(evt){ if(!_isFocus){ cancelHighLight(); } }); var showTipsTime = null; /** * 鼠标悬停在节点上 */ cy.on('mouseover', 'node', function(evt){ if(evt.target._private.style['z-index'].value == 20){ // 非暗淡状态 // $("#Main").css("cursor","pointer"); // var node = evt.target; node.addClass('nodeHover'); if(!_isFocus){ cy.collection("edge").removeClass("edgeShow"); cy.collection("edge").removeClass("edgeActive"); node.neighborhood("edge").addClass("edgeActive"); } // 提示 clearTimeout(showTipsTime); //if(node._private.data.name.length > 13 || (node._private.data.keyNo[0] == 'p' && node._private.data.name.length > 3) || node._private.data.layout.revel > 2){ if(node._private.data.name.length > 13 || (node._private.data.keyNo && node._private.data.keyNo[0] == 'p' && node._private.data.name.length > 3)){ showTipsTime = setTimeout(function () { var name = node._private.data.name; // 显示在节点位置 /*var tipWidth = name.length * 12 + 16; var x = node._private.data.d3x + 655 - (tipWidth / 2); var y = node._private.data.d3y + 598; if(node._private.data.type == 'Person'){ y = node._private.data.d3y + 590; }*/ // 显示在鼠标位置 var event = evt.originalEvent ||window.event; var x = event.clientX + 10; var y = event.clientY + 10; var html = "<div class='tips' style='font-size:12px;background:white;box-shadow:0px 0px 3px #999;border-radius:1px;opacity:1;padding:1px;padding-left:8px;padding-right:8px;display:none;position: absolute;left:"+ x +"px;top:"+ y +"px;'>"+ name +"</div>"; $('body').append($(html)); $('.tips').fadeIn(); },600); } } }); /** * 鼠标移开节点 */ cy.on('mouseout', 'node', function(evt){ $("#Main").css("cursor","default"); // 提示 $('.tips').fadeOut(function () { $('.tips').remove(); }); clearTimeout(showTipsTime); // var node = evt.target; node.removeClass('nodeHover'); if(!_isFocus){ cy.collection("edge").removeClass("edgeActive"); /*if(moveTimeer){ clearTimeout(moveTimeer); }*/ /*moveTimeer = setTimeout(function() { cy.collection("edge").addClass("edgeActive"); //cy.collection("edge").addClass("edgeShow"); }, 300); if(activeNode){ activeNode.neighborhood("edge").addClass("edgeActive"); }*/ } }); /** * 鼠标悬停在连线上 */ cy.on('mouseover', 'edge', function(evt){ if(!_isFocus){ var edge = evt.target; /*if(moveTimeer){ clearTimeout(moveTimeer); }*/ cy.collection("edge").removeClass("edgeActive"); edge.addClass("edgeActive"); /*if(activeNode){ activeNode.neighborhood("edge").addClass("edgeActive"); }*/ } }); /** * 鼠标离开连线 */ cy.on('mouseout', 'edge', function(evt){ if(!_isFocus){ var edge = evt.target; edge.removeClass("edgeActive"); // moveTimeer = setTimeout(function() { // cy.collection("edge").addClass("edgeActive"); // //cy.collection("edge").addClass("edgeShow"); // }, 400); if(activeNode){ activeNode.neighborhood("edge").addClass("edgeActive"); } } }); /** * 鼠标点击连线时触发 */ cy.on('click', 'edge', function(evt){ _isFocus = false; activeNode = null; cy.collection("node").removeClass("nodeActive"); $('.tp-detail').fadeOut(); cancelHighLight(); }); /** * 点击画布，节点全部恢复高亮 */ cy.on('click', function(event){ var evtTarget = event.target; if( evtTarget === cy ){ _isFocus = false; activeNode = null; cy.collection("node").removeClass("nodeActive"); $('.tp-detail').fadeOut(); cancelHighLight(); focusCancel(); filterReset(); } }); /** * 图谱缩放后触发 */ cy.on('zoom',function(){ console.log(cy.zoom()); if(cy.zoom()<0.5){ cy.collection("node").addClass("hidetext"); cy.collection("edge").addClass("hidetext"); }else{ cy.collection("node").removeClass("hidetext"); cy.collection("edge").removeClass("hidetext"); } // 加载完成后，加载该类，修复线有锯齿的问题 setTimeout(function () { cy.collection("edge").removeClass("lineFixed"); cy.collection("edge").addClass("lineFixed"); },200); }) /** * 图谱被移动/拖拽后触发 */ cy.on('pan',function () { // 加载完成后，加载该类，修复线有锯齿的问题 setTimeout(function () { cy.collection("edge").removeClass("lineFixed"); cy.collection("edge").addClass("lineFixed"); },200); }); // 定位 cy.nodes().positions(function( node, i ){ // 保持居中 if(node._private.data.keyNo == _currentKeyNo){ var position= cy.pan(); cy.pan({ x: position.x-node._private.data.d3x, y: position.y-node._private.data.d3y }); } // return { x: node._private.data.d3x, y: node._private.data.d3y }; }); cy.ready(function () { if(!$('#TrTxt').hasClass('active')){ $('#TrTxt').click(); } cy.zoom({ level: 1, // the zoom level }); $("#load_data").hide(); //cy.$('#'+id).emit('tap'); //cy.center(cy.$('#'+id)); //cy.collection("edge").addClass("edgeActive"); // 加载完成后，加载该类，修复线有锯齿的问题 setTimeout(function () { cy.collection("edge").addClass("lineFixed"); },400); // 首页的插入图谱默认高亮第一层 if(_rootData && _rootData.nodes.length > 30 && typeof _INSERT_URL != 'undefined' && _INSERT_URL){ highLight([_rootNode.nodeId],cy); } }); cy.nodes(function (node) { /* // 当前查询节点关系文字显示 if(node._private.data.nodeId == _rootNode.nodeId){ node.neighborhood("edge").addClass("edgeLevel1"); }*/ }); } /** * 图谱缩放 * type == 1 放大 * type == 2 缩小 */ function maoScale(type){ var rate = 0.2; var scale = cy.zoom(); if(type==1){ scale += rate; }else if(type==2){ scale -= rate; } cy.zoom({ level: scale, // the zoom level }); } function highLight(nodeIds,cy) { cy.collection("node").removeClass("nodeActive"); cy.collection("edge").removeClass("edgeActive"); cy.collection("node").addClass('dull'); cy.collection("edge").addClass('dull'); for(var i = 0; i < nodeIds.length; i++){ var nodeId = nodeIds[i]; cy.nodes(function (node) { var nodeData = node._private.data; if(nodeData.id == nodeId){ node.removeClass('dull'); //node.addClass('nodeActive'); node.neighborhood("edge").removeClass("dull"); node.neighborhood("edge").addClass("edgeActive"); node.neighborhood("edge").connectedNodes().removeClass("dull"); //node.neighborhood("edge").connectedNodes().addClass("nodeActive"); } }); } } function highLightFilter(nodeIds,cy) { function isInNodeIds(nodeId) { for(var i = 0; i < nodeIds.length; i++){ if(nodeId == nodeIds[i]){ return true; break; } } return false; } cy.collection("node").removeClass("nodeActive"); cy.collection("edge").removeClass("edgeActive"); cy.collection("node").addClass('dull'); cy.collection("edge").addClass('dull'); for(var i = 0; i < nodeIds.length; i++){ var nodeId = nodeIds[i]; cy.nodes(function (node) { var nodeData = node._private.data; if(nodeData.id == nodeId){ node.removeClass('dull'); //node.addClass('nodeActive'); /*node.neighborhood("edge").removeClass("dull"); node.neighborhood("edge").addClass("edgeActive"); node.neighborhood("edge").connectedNodes().removeClass("dull");*/ //node.neighborhood("edge").connectedNodes().addClass("nodeActive"); } }); } cy.edges(function (edge) { var data = edge._private.data; if(isInNodeIds(data.target) && isInNodeIds(data.source)){ edge.removeClass('dull'); edge.addClass('edgeActive'); } }); } function cancelHighLight() { cy.collection("node").removeClass("nodeActive"); cy.collection("edge").removeClass("edgeActive"); cy.collection("node").removeClass('dull'); cy.collection("edge").removeClass('dull'); } //筛选面板：聚焦准备 function focusReady(node) { filterReset(); $('#FocusInput').val(node.data.obj.properties.name); $('#FocusInput').attr('node_id',node.nodeId); $('#FocusBt').text('聚焦'); $('#FocusBt').removeClass('focusDisable'); $('#ClearInput').show(); } //筛选面板：取消聚焦 function focusCancel() { $('#ClearInput').hide(); $('#FocusBt').text('聚焦'); $('#FocusBt').addClass('focusDisable'); $('#FocusInput').val(''); $('#FocusInput').attr('node_id',''); selPanelUpdateList(_rootData.nodes,_rootData.links,true); cancelHighLight(); } function filterReset(){ $('#SelPanel').attr('param-level','2'); $('#SelPanel').attr('param-status',''); $('#SelPanel').attr('param-num',''); $('#SelPanel').attr('param-invest',''); $('#ShowLevel a').removeClass('active'); $('#ShowLevel a').eq(1).addClass('active'); $('#ShowStatus a').removeClass('active'); $('#ShowStatus a').eq(0).addClass('active'); $('#ShowInvest a').removeClass('active'); $('#ShowInvest a').eq(0).addClass('active'); $('#inputRange').val(0); $('#inputRange').css({'backgroundSize':'0% 100%'}); } //将rootData转换成cy图谱框架所需要的数据结构 function transformData(graphData) { function getLinkColor(type) { if(type == 'INVEST'){ return _COLOR.line.invest; } else if(type == 'EMPLOY') { return _COLOR.line.employ; } else if(type == 'LEGAL') { return _COLOR.line.legal; } } function getLinkLabel(link) { var type = link.data.obj.type, role = link.data.obj.properties.role; if(type == 'INVEST'){ return '投资'; } else if(type == 'EMPLOY') { return (role ? role : '任职'); } else if(type == 'LEGAL') { return '法定代表人'; } } //getLayoutNode(graphData); // id = graphData.nodes[0].nodeId; var els = {}; els.nodes = []; els.edges = []; graphData.links.forEach(function (link,i) { var color = getLinkColor(link.data.obj.type); var label = getLinkLabel(link); els.edges.push({ data:{ data:link.data, color: color, id:link.linkId, label:label, source:link.sourceNode.nodeId, target:link.targetNode.nodeId }, classes:'autorotate' }); }); graphData.nodes.forEach(function (node) { els.nodes.push({ data:{ nodeId:node.nodeId, type:node.data.obj.labels[0], keyNo:node.data.obj.properties.keyNo, data:node.data, id:node.nodeId, name:node.data.obj.properties.name, category:node.data.category, color:node.data.color, borderColor:node.data.strokeColor, layout:node.layout, d3x:node.x, d3y:node.y, hasImage:node.data.obj.properties.hasImage, //labelLine:1 // 解决文字行距问题，第1行 } }); }); return els; } //筛选面板：列表更新 function selPanelUpdateList(nodes,links,isShowCheckbox) { $('.tp-list').html(''); for(var i = 0; i < nodes.length; i++){ var node = nodes[i]; var index = i + 1; var name = node.data.obj.properties.name; var keyNo = node.data.obj.properties.keyNo; var str = ''; if(isShowCheckbox){ str = '<div class="checkbox" node_id="'+ node.nodeId +'" keyno="'+ keyNo +'"> <input checked type="checkbox"><label> ' + index + '.' + name + '</label> </div>'; // var str = '<div class="checkbox" node_id="'+ node.nodeId +'" keyno="'+ keyNo +'"> <label> ' + index + '.' + name + '</label> </div>'; } else { str = '<div class="checkbox" node_id="'+ node.nodeId +'" keyno="'+ keyNo +'"><label> ' + index + '.' + name + '</label> </div>'; } $('.tp-list').append(str); } $('.tp-list > div > label').click(function () { var _parent = $(this).parent(); var nodeId = _parent.attr('node_id'); focusReady(getGraphNode(nodeId,nodes)); }); $('.tp-list > div > input').click(function () { /*var _this = $(this); var _parent = $(this).parent(); var nodeId = _parent.attr('node_id'); var checkedNodeIds = $('.tp-list').attr('node_ids'); if(checkedNodeIds){ checkedNodeIds = checkedNodeIds.split(','); }*/ var checkedNodeIds = []; $('.tp-list input:checked').each(function () { var _parent = $(this).parent(); var nodeId = _parent.attr('node_id'); checkedNodeIds.push(nodeId); }); /*if(_this.is(':checked')){ checkedNodeIds.push(nodeId); nodes.splice(1,1); console.log('checked'); } else { console.log('un checked'); var sub_nodes = [] sub_nodes = nodes.splice(0,1); console.log(nodes); console.log(sub_nodes); graphInit(nodes, links); }*/ highLight(checkedNodeIds,cy); /*// 需要隐藏的节点及子节点 var choosedNode = getGraphNode(nodeId,nodes); var subNodes = getSubNodes(choosedNode,links); subNodes.push(choosedNode); // 剩下的节点 var lastNodes = []; for(var i = 0; i < nodes.length; i++){ var node = nodes[i]; if(!getGraphNode(node.nodeId,subNodes)){ lastNodes.push(node); } } // 剩下的连线 var lastLinks = filterLinksByNodes(lastNodes,links); graphInit(lastNodes, lastLinks); if(_this.is(':checked')){ nodes.splice(1,1); console.log('checked'); } else { console.log('un checked'); var sub_nodes = [] sub_nodes = nodes.splice(0,1); console.log(nodes); console.log(sub_nodes); graphInit(nodes, links); } console.log(nodeId);*/ }); } function showDetail2(keyNo, tupuUrl, type){ console.log(keyNo) } // ---------------------------- domUpdate 调用的方法 ---- End // 数据处理：将原始数据转换成graph数据 function getRootData(list) { // console.log(list); var graph = {} graph.nodes = []; graph.links = []; //graph.nodes for(var i = 0; i < list.length; i++){ var nodes = list[i].graph.nodes; for(var j = 0; j < nodes.length; j++){ var node = nodes[j]; var o = {}; o.nodeId = node.id; o.data = {}; o.data.obj = node; //o.data.showStatus = 'NORMAL'; // NORMAL HIGHLIGHT DULL o.data.showStatus = null; // NORMAL HIGHLIGHT DULL o.layout = {} o.layout.level = null; // 1 当前查询节点 o.layout.singleLinkChildren = []; // 只连接自己的node graph.nodes.push(o); // 设置_rootNode if (_currentKeyNo == o.data.obj.properties.keyNo){ _rootNode = o; } } } graph.nodes = uniqeByKeys(graph.nodes,['nodeId']); //graph.links for(var i = 0; i < list.length; i++){ var relationships = list[i].graph.relationships; for(var k = 0; k < relationships.length; k++) { var relationship = relationships[k]; var o = {} o.data = {}; o.data.obj = relationship; //o.data.showStatus = 'NORMAL'; // NORMAL HIGHLIGHT DULL o.data.showStatus = null; // NORMAL HIGHLIGHT DULL o.sourceNode = getGraphNode(relationship.startNode,graph.nodes); o.targetNode = getGraphNode(relationship.endNode,graph.nodes); o.linkId = relationship.id; o.source = getNodesIndex(relationship.startNode,graph.nodes); o.target = getNodesIndex(relationship.endNode,graph.nodes); graph.links.push(o); } } graph.links = uniqeByKeys(graph.links,['linkId']); // console.log(graph); //emplyRevert(graph.links); //mergeLinks(graph.links); setLevel(graph.nodes,graph.links); setCategoryColor(graph.nodes,graph.links); return graph; } // --------------------------- getRootData()引用的函数 ----- Begin //去重操作,元素为对象 function uniqeByKeys(array,keys){ //将对象元素转换成字符串以作比较 function obj2key(obj, keys){ var n = keys.length, key = []; while(n--){ key.push(obj[keys[n]]); } return key.join('|'); } var arr = []; var hash = {}; for (var i = 0, j = array.length; i < j; i++) { var k = obj2key(array[i], keys); if (!(k in hash)) { hash[k] = true; arr .push(array[i]); } } return arr ; }; // 数据处理：根据nodeId获取node function getGraphNode(nodeId,nodes) { var node = null; for(var i = 0; i < nodes.length; i++){ if(nodes[i].nodeId == nodeId) { node = nodes[i]; break; } } return node; } // 数据处理：根据nodeId获取node 索引 function getNodesIndex(nodeId,nodes) { var index = 0; for(var i = 0; i < nodes.length; i++){ var node = nodes[i]; if(nodeId == node.nodeId){ index = i; break; } } return index; } // 数据处理：设置节点层级 function setLevel(svg_nodes,svg_links) { function getNextNodes(nodeId,links,parentLevel){ var nextNodes = []; for(var i = 0; i < links.length; i++){ var link = links[i]; if(nodeId == link.sourceNode.nodeId && !link.targetNode.layout.level){ link.targetNode.layout.level = parentLevel; nextNodes.push(link.targetNode); } else if (nodeId == link.targetNode.nodeId && !link.sourceNode.layout.level) { link.sourceNode.layout.level = parentLevel; nextNodes.push(link.sourceNode); } } nextNodes = uniqeByKeys(nextNodes,['nodeId']); return nextNodes; } var level = 1; var nodes = []; nodes.push(_rootNode); while(nodes.length){ var nextNodes = []; for(var i = 0; i < nodes.length; i++){ var node = nodes[i] || {}; node.layout.level = level; nextNodes = nextNodes.concat(getNextNodes(node.nodeId,svg_links,level)); } level++; nodes = nextNodes; } } // 数据处理：设置节点角色 function setCategoryColor(nodes, links){ for(var i = 0; i < links.length; i++){ var sameLink = {}; // 两点间连线信息 sameLink.length = 0; // 两点间连线数量 sameLink.currentIndex = 0; // 当前线索引 sameLink.isSetedSameLink = false; links[i].sameLink = sameLink; } /*链接相同两点的线*/ for(var i = 0; i < links.length; i++){ var baseLink = links[i]; if(baseLink.sameLink.isSetedSameLink == false){ baseLink.sameLink.isSetedSameLink = true; var nodeId1 = baseLink.sourceNode.nodeId; var nodeId2 = baseLink.targetNode.nodeId; var sameLinks = []; sameLinks.push(baseLink); for(var j = 0; j < links.length; j++){ var otherLink = links[j]; if(baseLink.linkId != otherLink.linkId && !otherLink.sameLink.isSetedSameLink){ if((otherLink.sourceNode.nodeId == nodeId1 && otherLink.targetNode.nodeId == nodeId2 ) || (otherLink.sourceNode.nodeId == nodeId2 && otherLink.targetNode.nodeId == nodeId1 ) ){ sameLinks.push(otherLink); otherLink.sameLink.isSetedSameLink = true; } } } for(var k = 0; k < sameLinks.length; k++){ var oneLink = sameLinks[k]; oneLink.sameLink.length = sameLinks.length; // 两点间连线数量 oneLink.sameLink.currentIndex = k; // 当前线索引 } } } for(var i = 0; i < nodes.length; i++) { var node = nodes[i]; if (_currentKeyNo == node.data.obj.properties.keyNo) { // 当前节点 node.data.color = _COLOR.node.current; node.data.strokeColor = _COLOR.border.current; } else if (node.data.obj.labels[0] == 'Company') { node.data.color = _COLOR.node.company; node.data.strokeColor = _COLOR.border.company; } else { node.data.color = _COLOR.node.person; node.data.strokeColor = _COLOR.border.person; } } } // --------------------------- getRootData()引用的函数 ----- End }, } </script>
