Cytoscape.js

Question

我有一个显示带有 Cytoscape.js 图表的页面，但 .layout() 在 Firefox 中对我不起作用，但在 Chrome 中却有效。 Chrome 显示带有布局的图形。 Firefox 显示该图，但所有节点都杂乱无章。如果我不使用布局，它在 Chrome 中看起来是一样的，所以布局似乎由于某种原因在 Firefox 中不起作用。

我尝试了 Cytoscape.js 网站 (http://js.cytoscape.org/#layouts) and they work in Chrome, but not in Firefox. I currently use the cose layout (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 得到。

示例（整个东西太大了，post 都放在这里）： {"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 中有效（尽管据我所知不应该），我会接受这个答案。

Cytoscape.js - layout() 在 Firefox 中不起作用，在 Chrome 中起作用

Cytoscape.js - layout() doesn't work in Firefox, works in Chrome

javascript

jquery

google-chrome

firefox