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

您可以使用此技巧来显示/隐藏网络画布，这将解决网络的定位问题。我不知道这个职位是否合适。但这将达到目的。对于显示隐藏功能，我们可以使用

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

Source

class，而不使用display:none;。您可以使用toggleClass方法在hide类之间切换并删除折叠功能。可以在here中找到有效的演示。

VisJS网络未居中

1 个答案: