如何在模式中将vis.js网络居中？

Question

目前，我在使用vis.js打开模态时如何使网络居中存在问题。如果不使用模态，我没有问题，网络可以完美地居中。我只是复制相同的代码HTML和JS，但如果使用模式，则结果不同。

这是使用模式的视图。

<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>

Answer 1

<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>
  function network_draw(){
      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);
  };

  $('#myId').on('shown.bs.modal', function (e) {
    network_draw();
  });
</script>