VisJS网络不居中

Question

我正在尝试创建一个vis js网络。这就是图形的样子

这是在页面源上看到的代码

<script type="text/javascript">

             var options = {
              width: '1000px',
              height: '600px',
              nodes: {
              font: {
                multi: true,
                bold: {
                  mod: '',
                  color: '#940A0A'
                    }
                 }
               }
              };

              // create an array with nodes
              var devNodes = new vis.DataSet(<array-of-nodes>);

              // create an array with edges
              var devEdges = new vis.DataSet(<array-of-edges>);
              var devData = {
                nodes: devNodes,
                edges: devEdges
              };

              // create a network
              var devContainer = document.getElementById('networkDiv');
              var devNetwork = new vis.Network(devContainer, devData, options);
              devNetwork.on( 'select', function(properties) {
                var ids = properties.nodes;
                console.log('clicked nodes:', ids[0]);
                });
        </script>

这是相应的html

<div class="panel panel-primary" id="devPanel">
                    <div class="panel-heading" id="devHeading">DEV</div>
                    <div class="panel-body">
                        <div id="networkDiv"></div>
                    </div>
                </div>

现在，我必须将此图表作为表格的一部分。但是，现在网络没有呈现在div的中心

这是javascript

<script type="text/javascript">

             var options = {
              width: '1000px',
              height: '600px',
              nodes: {
              font: {
                multi: true,
                bold: {
                  mod: '',
                  color: '#940A0A'
                    }
                 }
               }
              };

              // create an array with nodes
              var devNodes = new vis.DataSet(<array-of-nodes>);

              // create an array with edges
              var devEdges = new vis.DataSet(<array-of-edges>);
              var devData = {
                nodes: devNodes,
                edges: devEdges
              };

              // create a network
              var devContainer = document.getElementById('networkDiv');
              var devNetwork = new vis.Network(devContainer, devData, options);
              devNetwork.on( 'select', function(properties) {
                var ids = properties.nodes;
                console.log('clicked nodes:', ids[0]);
                });
        </script>

这是相应的html

<tr>
                <td> val1 </td>
                <td> val2 </td>
                <td>

                    <p class="bg-success">

                val3  </p></td>
                <td>
                    <a href="blah">val4</a>
                </td>
                <td>
                    <button data-toggle="collapse" class="btn btn-info" data-target="#networkPanel">val5 button</button>
                </td>

            </tr>
<tr>
                <td colspan="5">
                    <div class="panel panel-primary panel-collapse collapse" id="networkPanel">
                        <div class="panel-heading">val2</div>
                        <div class="panel-body">
                            <div id="networkDiv"></div>
                        </div>
                    </div>
                </td>
            </tr>

那么，在第二种情况下，为什么网络会在左上角渲染？我怎样才能确保网络总是在div的中间呈现？

Answer 1

你可以使用这个hack来显示/隐藏网络画布，这将解决网络的定位问题。我不知道这个帖子是否合适。但这将成功。对于我们可以使用的show hide功能

.hide {
 position: absolute !important;
 top: -9999px !important;
 left: -9999px !important;
}

Source

而不是使用display:none;。您可以使用toggleClass方法在hide类之间切换并删除折叠功能。工作演示可以找到here。