Cytoscape.js - layout（）在Firefox中不起作用，適用於Chrome

Question

我有一個頁面顯示Cytoscape.js的圖形，但.layout()在Firefox中不適用於我，但它在Chrome中適用。 Chrome瀏覽器顯示帶佈局的圖形。 Firefox顯示圖形，但所有節點混亂在一起。如果我不使用佈局，它看起來與Chrome相同，所以看起來佈局由於某種原因在Firefox中不起作用。

我嘗試了一些Cytoscape.js網站的佈局（http://js.cytoscape.org/#layouts），他們在Chrome中工作，但不在Firefox中工作。我目前使用cose佈局（http://js.cytoscape.org/#layouts/cose）。

Firefox的版本是52.0.2

Chrome的57.0.2987.133版本

Cytoscape.js是3.0.0版本

我的javascript：

$(document).ready(function() { 
    $("#cy").attr("foo", "foo"); 
    var cy = cytoscape({ 
      container: $("#cy"), 
      layout: { 
      name: 'preset' 
      }, 
      style: [ 
      { 
       selector: 'node', 
       style: { 
       'content': 'data(id)' 
       } 
      }, 
      { 
       selector: "edge", 
       style: { 
        "line-color": "data(color)" 
       } 
      }, 
      { 
       selector: ':parent', 
       style: { 
       'background-opacity': 0.6 
       } 
      } 
      ] 
     }); 
    var options = { 
       name: 'cose', 

       // Called on `layoutready` 
       ready: function(){}, 

       // Called on `layoutstop` 
       stop: function(){}, 

       // Whether to animate while running the layout 
       animate: true, 

       // The layout animates only after this many milliseconds 
       // (prevents flashing on fast runs) 
       animationThreshold: 250, 

       // Number of iterations between consecutive screen positions update 
       // (0 -> only updated on the end) 
       refresh: 20, 

       // Whether to fit the network view after when done 
       fit: true, 

       // Padding on fit 
       padding: 30, 

       // Constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } 
       boundingBox: undefined, 

       // Randomize the initial positions of the nodes (true) or use existing positions (false) 
       randomize: false, 

       // Extra spacing between components in non-compound graphs 
       componentSpacing: 100, 

       // Node repulsion (non overlapping) multiplier 
       nodeRepulsion: function(node){ return 400000; }, 

       // Node repulsion (overlapping) multiplier 
       nodeOverlap: 10, 

       // Ideal edge (non nested) length 
       idealEdgeLength: function(edge){ return 10; }, 

       // Divisor to compute edge forces 
       edgeElasticity: function(edge){ return 100; }, 

       // Nesting factor (multiplier) to compute ideal edge length for nested edges 
       nestingFactor: 5, 

       // Gravity force (constant) 
       gravity: 80, 

       // Maximum number of iterations to perform 
       numIter: 1000, 

       // Initial temperature (maximum node displacement) 
       initialTemp: 200, 

       // Cooling factor (how the temperature is reduced between consecutive iterations 
       coolingFactor: 0.95, 

       // Lower temperature threshold (below this point the layout will end) 
       minTemp: 1.0, 

       // Pass a reference to weaver to use threads for calculations 
       weaver: false 
    }; 
    cy.add(graphElements); 
    cy.layout(options); 
}); 

我的頁面：

{% extends "queryapp/base.html" %} 
{% block content %} 
{% block title %}Default query page{% endblock %} 
{% load static %} 
<script> 
var graphElements = {{ graph_elements|safe }}; 
</script> 
<script src="{% static 'skimmr_django/js/jquery-3.1.1.min.js' %}"></script> 
<script src="{% static 'queryapp/js/cytoscape.js' %}"></script> 
<script src="{% static 'queryapp/js/result.js' %}"></script> 
<link rel="stylesheet" type="text/css" href="{% static 'queryapp/css/result.css' %}" /> 

<div id="cy"></div> 
{% endblock %} 

graphElements是有效的JSON我從Python獲得。

例（整件事是太大了，它張貼在這裏全部）： {"grabbable": true, "data": {"label-size": 9, "width": 0.4, "color": "#6699CC", "id": "something_about_boy"}, "group": "nodes", "classes": "node-class"},

圖形作品和正確的Chrome，但問題是在Firefox佈局不起作用。我能做些什麼來解決這個問題？編輯：

我也試過Internet Explorer，它不工作。

Answer 1

問題是，我一直在實行：

http://js.cytoscape.org/#getting-started/initialisation

這並不能告訴你（從http://js.cytoscape.org/#notation/position）以下：

position: { // the model position of the node (optional on init, mandatory after)

我不在乎關於我的節點的初始位置，所以我沒有添加它。請注意，我將節點加載到圖中並且沒有初始節點。初始節點不需要位置，你加載的位置。

我加position到我的節點（所以它現在包含在JSON），並改變了使用Javascript（這可能不是必要的，但我會添加它，以防萬一它是）：

cy.add(graphElements); 
var layout = cy.elements().layout(options); 
layout.run(); 

它現在可以在Firefox和Chrome中運行。

如果你遇到這個問題，加

position { 
    x: 1, 
    y: 1 
} 

到您的節點。如果遇到這個問題，你可能不關心初始位置（像我），所以你可以使用任何東西或忘記將位置添加到節點。

之後，佈局將工作。

如果有人能解釋爲什麼它在Chrome中工作（儘管據我瞭解它不應該），我會接受該答案。