Как центрировать vis. js сеть в модале? - PullRequest
Новая
       21

Как центрировать vis. js сеть в модале?

0 голосов
/ 21 апреля 2020

В настоящее время у меня проблема с центрированием сети при открытии модального окна с помощью vis. js. У меня нет проблем, если не использовать модальный, сеть отцентрирована идеально. Я просто повторяю один и тот же код HTML и JS, но другой результат при использовании модального.

Это представление при использовании модального.

enter image description here

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.10.0/vis.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.10.0/vis.min.js"></script>

<div class="modal fade" id="myId" tabindex="-1" role="dialog" aria-labelledby="basicModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Service</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="addServiceTopo">
                    <div class="row">
                        <div id="mynetwork" style="height:400px;width:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
    ]);
    var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 4 }
    ]);
    var container = document.getElementById("mynetwork");
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    var network = new vis.Network(container, data, options);
});
</script>
...