Question

我想让vis.js图形动态缩放以填充浏览器空间。他们目前只占显示的画布的一小部分。

通过API进行读取，Network.fit（）似乎是一个合理的选择，但似乎并没有达到我的预期。我认为内容将按比例放大/缩小以最好地填充画布。

我尝试不对画布的大小进行硬编码，以便将其调整为最终用户浏览器尺寸的百分比。如果目前尚无在vis中执行此操作的方法，我想下一次尝试可能是弄清客户端上的画布尺寸是什么，并用它们告诉vis图如何适当缩放？ >

w3school的代码运行：

https://www.w3schools.com/code/tryit.asp?filename=GD4F3SHRPWJQ

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.8.2/vis.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>

    <style id="compiled-css" type="text/css">
        #mynetwork {
            width: 100%;
            height: 100vh;
            border: 1px solid lightgray;
        }
    </style>

    <script type="text/javascript">//<![CDATA[



        window.onload=function(){

        var nodeSet = [];

            //rootNode
            nodeSet.push({id:"5", 
                 label:"human", 
                 url:"/Server?Node=" + "5"});

            //leaves

            nodeSet.push({id:"8", 
                         label:"Thomas", 
                         url:"/BackToTech/server?Node=" + "Thomas"});

            nodeSet.push({id:"12", 
                         label:"Jefferson", 
                         url:"/BackToTech/server?Node=" + "Jefferson"});

        var nodes = new vis.DataSet(nodeSet);

        var edgeSet = [];

            edgeSet.push({from: "5", 
                          to: "8",
                          label: "category of"});

            edgeSet.push({from: "5", 
                          to: "12",
                          label: "category of"});


        var edges = new vis.DataSet(edgeSet);    

        // create a network
        var container = document.getElementById('mynetwork');
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {edges:{
                                arrows: {
                                            to: {
                                              enabled: true,
                                              imageHeight: undefined,
                                              imageWidth: undefined,
                                              scaleFactor: 1,
                                              src: undefined,
                                              type: "arrow"
                                            }},
                                length:200
                             },
                       physics: {
                            "enabled": true
                       },
                        autoResize: true,
                        height: '100%',
                        width: '100%'
                    };
        var network = new vis.Network(container, data, options);
        network.fit();
        network.on("selectNode", function (params) {
            if (params.nodes.length === 1) {
                var node = nodes.get(params.nodes[0]);
                window.open(node.url, '_blank');
            }
        });

        }

  //]]></script>
</head>
<body>

    <div id="mynetwork"></div>

</body>
</html>

调整vis.js图大小以填充屏幕

0 个答案: