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>

现在，我必须将此图表作为 table 的一部分。但是，现在网络没有呈现在 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 网络 canvas，这将解决网络的定位问题。我不知道这 post 是否合适。但这可以解决问题。对于显示隐藏功能，我们可以使用

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

Source

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

VisJS 网络不居中

VisJS Network is not centered

jquery

vis.js

bootstrap-4