基于cytoscape.js 、 d3.js实现的关系图谱初级版本

最新推荐文章于 2024-09-10 08:09:20 发布
最新推荐文章于 2024-09-10 08:09:20 发布
阅读量1.1k 收藏 4
点赞数 2
文章标签： 人工智能 javascript 数据结构与算法 ViewUI
原文链接：http://www.cnblogs.com/stella1024/p/10148256.html
版权
本文介绍如何在Vue项目中使用Cytoscape.js和D3.js绘制图谱，展示了从HTML页面移植到Vue项目的图谱绘制过程。代码示例详细说明了图谱的布局、节点样式、边线处理以及用户交互功能，如缩放、平移和节点高亮。
摘要由CSDN通过智能技术生成

前面的文章已经介绍了cytoscape.js 、 d3.js的安装及简单demo，现在展示从html页面转移到vue项目下的最初版的demo

效果图：

 

代码如下：

<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>

 

转载于:https://www.cnblogs.com/stella1024/p/10148256.html

anmi7832
关注
使用ZRender和D3绘制JavaScript关系图谱
syntax_api860的博客
10-06 376
在JavaScript中，我们可以使用ZRender和D3这两个强大的库来创建交互式的关系图谱。接下来，我们创建一个HTML文件，然后在文件中添加一个容器元素，用于容纳绘制的关系图谱。在上述代码中，我们首先创建了一个ZRender实例，并将其绑定到HTML中的容器元素上。然后，我们创建了一个D3力导向图实例，并设置了力导向图的一些参数，如链接力、斥力和中心力。然后，我们创建了关系图谱的节点，使用。在关系图谱的绘制过程中，我们首先创建了关系图谱的链接线，使用。最后，我们设置了力导向图的初始状态，并通过。
如何在 Vue3 中使用 Cytoscape.js 创建交互式网络图
ScriptEcho的博客
06-21 904
网络图是一种用于表示节点和连接关系的图形化表示形式。在许多领域都有广泛的应用，例如社交网络分析、生物信息学和计算机科学。Cytoscape.js是一个用于创建和交互式可视化复杂网络的开源JavaScript库。本代码演示了如何使用Cytoscape.js在Vue.js应用程序中创建和可视化一个简单的网络图。该代码将加载Cytoscape.js库，并使用它在页面上创建了一个网络图容器。然后，它将数据加载到网络图中，并使用Cytoscape.js提供的布局算法对其进行可视化。
【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
热门推荐
十二月咖啡馆工作室
10-25 4万+
力学图（力导向图）与生活中常见的人物关系图结合，是比较有趣的。本文将以此为凭，阐述在力学图中如何插入外部图片和文字。
Cytoscape.js-fcose 使用教程
最新发布
gitblog_00492的博客
09-10 302
Cytoscape.js-fcose 使用教程 cytoscape.js-fcosefCoSE: a fast Compound Spring Embedder项目地址:https://gitcode.com/gh_mirrors/cy/cytoscape.js-fcose 1、项目介绍 Cytoscape.js-fcose 是一个基于 Cytoscape.js 的扩展，名为 fCoSE（发音为...
基于cytoscape.js 、 d3.js实现的关系图谱初级版本 (收藏)
一只小白奔向大牛的故事
10-31 4090
这个老哥感觉是全博客中写的比较全的了 前面的文章已经介绍了cytoscape.js 、 d3.js的安装及简单demo，现在展示从html页面转移到vue项目下的最初版的demo 效果图： <template> <div style="width: 100%;height: 100%;"> ...
d3.js关系图谱示例
04-28
d3关系树图，可控制方向实现树节点展开和收缩
D3.js关系图表&组织结构图表
05-02
支持节点拖拽 支持节点拖拽并固定位置 支持鼠标浮到节点显示节点信息 支持鼠标浮到节点隐藏不相关的节点及线 支持画布整体缩放移动 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 支持双击画布空白处还原显示所有节点信息
知识图谱可视化之cytoscape.js构建知识图谱项目源码
03-15
2）使用Python的django框架进行开发，并将后台业务逻辑生成的数据传送到前端js中进行展示，实现动态图谱构建，满足工程实际需要。 动态与静态图谱均整合至项目源码中，使用不同路由即可访问。 注：结合博客理解本...
Cytoscape.js - 用于可视化和分析的图论(网络)的JS库-javascript
06-21
Cytoscape.js - 用于可视化和分析的图论(网络)的JS库 Cytoscape.js 用于可视化和分析的图论（网络）库：... 路线图 Cytoscape.js 的未来版本计划在 Github 问题跟踪器的里程碑中。 您可以使用里程碑来查看当前
cytoscape.js-cxtmenu:Cytoscape.js的上下文菜单
05-11
Cytoscape.js的圆形可滑动上下文菜单扩展 带有默认选项的： 具有自适应聚光灯半径功能的： 使用outsideMenuCancel ： 此扩展创建了一个小部件，使用户可以在Cytoscape.js中的节点上操作圆形上下文菜单。 用户沿圆形...
cytoscape.js-cise:Dogrusoz等人的圆形布局算法的实现。 作为Cytoscape.js扩展名
04-28
该算法由比尔肯特大学的作为Cytoscape.js扩展实现（） 使用此布局时，请引用以下内容： M. Belviranli，A。Dilek和U. Dogrusoz，在“ IEEE可视化与计算机图形学交易”，第1卷中的“ ”。 19号2013年第6卷，第953-...
cytoscape-d3:D3.js 对 Cytoscape 3 的支持
06-04
Cytoscape 到 D3.js 导出器 发布历史 2014 年 9 月 28 日 - 版本 1.0.2 发布。 仅小修复（无新功能）。 2014 年 9 月 15 日 - 版本 1.0.1 发布。 当用户选择网络和视图时，节点位置 (x, y) 将作为节点属性添加。 这个是来做什么的？ 这是一个应用程序，用于将网络和数据表导出为样式的 JSON。 D3.js 是一个用于数据可视化的 JavaScript 库，它的一些预设布局支持网络/树数据结构。 这个应用程序直接为 Cytoscape 网络和数据表中的那些预设创建 JSON 文件。 目前，此应用程序支持： 用于强制布局的网络 JSON（） 树 JSON（） 快速入门指南 安装应用 从应用商店 打开应用程序 → 应用程序管理器 选择 D3.js 导出器并单击安装 从源头 构建此应用程序的最低要求是 JDK 6 和 Maven
D3.js实现人物关系图谱有移动、拖拽、放大功能
04-28
D3.js实现人物关系图谱有移动、拖拽、放大功能
D3js横向纵向关系图（加箭头，连接线文字描述，折叠）
07-25
使用d3.js绘制组织关系图，有横向和纵向的以及箭头流向，连接线文字描述，层级折叠。
d3.js多重力导向图多条关系线
04-29
d3.js实现关系图，多条关系连线，关系说明居中。根据json参数自动生成关系图谱。
d3关系图开源demo
11-07
d3 关系 svg demo 样例 广度排序 d3 关系 svg demo 样例 广度排序
cytoscape.js-node-editing:一个 Cytoscape.js 扩展，用于提供调整节点大小的抓斗
05-30
Cytoscape.js 扩展提供某些节点编辑功能，如下所示： 努力调整节点的大小， 将节点大小调整为其标签的视觉提示，以及 使用箭头键移动选定节点的能力（加速键Alt和Shift 分别导致较慢和较快的移动），在下。 使用...
2022 拓扑图实现方案对比 D3.js Cytoscape.js Sigma.js NetV.js
a571574085的博客
07-25 1314
与Cytoscape.js、Sigma.js和NetV.js一样，G6使用图形实例来表示图形可视化的实体（节点-链接图），并使用声明式选项来简化创建过程。尽管库和工具包的数量不断增加，但使用图形可视化构建复杂的应用程序仍然具有挑战性，需要图形可视化方面的专业知识和大量的编码工作。基于对极端性能要求的考虑，保留转向其他支持WebGL的工具的可能性，例如Stardust和NetV.js。的网络）都是为图形可视化而设计的。，引入了更多面向图形的特性，以方便图形可视化的构建....
d3.js关系图
高山景行，一尘不染
04-02 7081
<!DOCTYPE html> <html> <head> <style> .nodetext { font-size: 12px; font-family: SimSun; fill: #000000; } ....
简化图层展示的Cytoscape.js-Layers插件
从文件的压缩包子文件的文件名称列表中，我们可以看到插件的源代码文件名是`cytoscape.js-layers-main`，这表明该插件包含一个主文件，该文件包含了插件的核心功能和实现代码。 综上所述，`cytoscape.js-layers`为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值