Question

我是JavaScript的新手，特别是cytoscape。

我有那段代码：

            <div id="graphicalEditor" class="tab-pane fade">

            <br> Name: <input type="text" id="name"> <input
                type="button" onclick="addnode('name');" value="add node">
            <input type="button" onclick="cy.remove('node');" value="clear">
            <input type="button" onclick="sendData()" value="send"> <br>
            <br>

            <div id="cy"
                style="width: 60em; height: 30em; postion: absolute; border: 1px solid black;"></div>

            <script type="text/javascript">
                var cy = cytoscape({

                    container : document.getElementById('cy'),

                    layout : {
                        name : 'preset'
                    },

                    // so we can see the ids
                    style : [ {
                        selector : 'node',
                        style : {
                            'content' : 'data(id)'
                        }
                    } ]

                });
            </script>

            <script type="text/javascript">
                function addnode(p) {

                    var nome = document.getElementById(p).value;

                    var eles = cy.add([ {
                        group : "nodes",
                        data : {
                            id : nome
                        },
                        position : {
                            x : 100,
                            y : 100
                        }
                    }

                    ]);
                }
            </script>

            <script type="text/javascript">
                function sendData() {
                    $.ajax({
                        type : 'GET',
                        dataType : 'json',
                        contentType : 'application/json',
                        url : "/testAjax",
                        data : cy.json()

                    });
                }
            </script>
        </div>

有人可以解释一下为什么只有在我调整firefox窗口后，cytoscape的div才能与js一起使用吗？调整大小后所有工作正常。

我不知道它是否相关，但这个div是在bootstrap nav-tabs中。

Answer 1

您需要将您的cytoscape初始化包装在DOMContentLoaded eventListener

中

document.addEventListener("DOMContentLoaded", function() {
    cy = cytoscape({..})
}

Answer 2

在完全加载页面之前，尝试将容器对准cyradospace。例如：

<script type="text/javascript"> 
  var cy;
  $(document).ready(function(){
     cy = cytoscape({
        container : document.getElementById('cy'),
           layout : {
              name : 'preset'
            },
                // so we can see the ids
           style : [ {
              selector : 'node',
              style : {
                 'content' : 'data(id)'
              }
           } ]
     });
  });
</script>

在调整窗口大小之前，JavaScript cytoscape不起作用

2 个答案: