Диаграмма размеров vis. js для заполнения экрана - PullRequest
Новая
       52

Диаграмма размеров vis. js для заполнения экрана

0 голосов
/ 18 марта 2020

Я бы хотел, чтобы графики Vis. js динамически масштабировались, чтобы заполнить пространство браузера. В настоящее время они занимают только небольшую часть отображаемого холста.

При чтении через API Network.fit () кажется логичным выбором, но, похоже, он не работает так, как я предполагал. Я думал, что содержимое будет увеличиваться / уменьшаться, чтобы лучше заполнить холст.

Я стараюсь не жестко кодировать размер холста, чтобы он соответствовал процентам от размеров браузера конечного пользователя. Если не существует готового способа сделать это в vis, я думаю, что следующая попытка может состоять в том, чтобы выяснить, каковы размеры холста на стороне клиента, и использовать их, чтобы указать 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>
...