vis.js Network更改样式

谁借莪１个温暖的怀抱￠ 2022-12-18 09:54 146阅读 0赞

参考：官网地址：[https://visjs.github.io/vis-network/docs/network/][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;
            // }
        }

![20201026142253762.png][]![20201026142302940.png][]

[https_visjs.github.io_vis-network_docs_network]: https://visjs.github.io/vis-network/docs/network/
[20201026142253762.png]: https://img-blog.csdnimg.cn/20201026142253762.png
[20201026142302940.png]: /images/20221122/4d5ef3e480d847d48be8c8d362d7af7c.png