欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vis.js Network更改样式

程序员文章站 2022-06-07 13:51:00
...

参考:官网地址:https://visjs.github.io/vis-network/docs/network/

要实现点击连接线将其变红,并且起始点也变红,点击其他线则点击线变红其他恢复原状。

话不多说直接撸:

  //设置链接线属性
    window.setEdgeOptions = function(edgeId, options, callback) {
        var edg = network.body.data.edges;
        var clickedEdges = edg.get(edgeId);
        $.each(options, function(key, value) {
            clickedEdges[key] = value;
        })
        if (typeof callback != "undefined" && $.isFunction(callback)) {
            callback(clickedEdges);
        }
        edg.update(clickedEdges);
    }

    //设置点属性
    window.setNodeOptions = function(nodeId, options, callback) {
        var nodeArr = network.body.data.nodes;
        var clickedNode = nodeArr.get(nodeId);
        $.each(options, function(key, value) {
            clickedNode[key] = value;
        })
        if (typeof callback != "undefined" && $.isFunction(callback)) {
            callback(clickedNode);
        }
        nodeArr.update(clickedNode);
    }
 //管段id
    var checkPipesId = "";
    var pipOption = {
        color: {}
    };
    var nodeOption = {
        color: {}
    };
    //根据管段id修改其样式
    function clickPipHandle(pipId) {
        if (!comm.isEmpty(checkPipesId)) { //切换后恢复默认
            pipOption.color.color = "#2B7CE9";
            window.setEdgeOptions(checkPipesId, pipOption, function(pip) {
                nodeOption.color.background = "#97C2FC";
                window.setNodeOptions(pip.from, nodeOption);
                window.setNodeOptions(pip.to, nodeOption);
            });
        }
        // if (pipId != checkPipesId) {
        pipOption.color.color = "red";
        window.setEdgeOptions(pipId, pipOption, function(pip) {
            nodeOption.color.background = "red";
            window.setNodeOptions(pip.from, nodeOption);
            window.setNodeOptions(pip.to, nodeOption);
        });
        checkPipesId = pipId;
        // }
    }

vis.js Network更改样式vis.js Network更改样式

相关标签: js