javascript - 我根本无法让cytoscape.js显示图表

我使用JavaScript图表程序cytoscape.js在网页中构建了图表。它根本不显示任何内容。但是，它除了警告缩放鼠标而不会发出语法错误之外，也没有给出语法错误。

这是代码:

     <style type="text/css">
        #cy {
            width: 90%;
            height: 300px;
            display: block;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"></script>
    <script type="text/javascript">
        var cy = cytoscape({

            container: document.getElementById('cy'), // container to render in


            style: [ // the stylesheet for the graph
                {
                    selector: 'node',
                    style: {
                        'background-color': '#666',
                        'label': 'data(id)'
                    }
                },

                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ccc',
                        'target-arrow-color': '#ccc',
                        'target-arrow-shape': 'triangle'
                    }
                }
            ],


            // initial viewport state:
            zoom: 1,
            pan: { x: 0, y: 0 },

            // interaction options:
            minZoom: 1e-50,
            maxZoom: 1e50,
            zoomingEnabled: true,
            userZoomingEnabled: true,
            panningEnabled: true,
            userPanningEnabled: true,
            boxSelectionEnabled: true,
            selectionType: 'single',
            touchTapThreshold: 8,
            desktopTapThreshold: 4,
            autolock: false,
            autoungrabify: false,
            autounselectify: false,

            // rendering options:
            headless: false,
            styleEnabled: true,
            hideEdgesOnViewport: false,
            textureOnViewport: false,
            motionBlur: false,
            motionBlurOpacity: 0.2,
            wheelSensitivity: 1,
            pixelRatio: 'auto'
        });
        let options = {
            name: 'breadthfirst',

            fit: true, // whether to fit the viewport to the graph
            directed: false, // whether the tree is directed downwards (or edges can point in any direction if false)
            padding: 30, // padding on fit
            circle: false, // put depths in concentric circles if true, put depths top down if false
            grid: false, // whether to create an even grid into which the DAG is placed (circle:false only)
            spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
            boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
            avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
            nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
            roots: undefined, // the roots of the trees
            maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
            animate: false, // whether to transition the node positions
            animationDuration: 500, // duration of animation in ms if enabled
            animationEasing: undefined, // easing of animation if enabled,
            animateFilter: function (node, i) { return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
            ready: undefined, // callback on layoutready
            stop: undefined, // callback on layoutstop
            transform: function (node, position) { return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
        };

        cy.layout(options);
var eles1 = cy.add([
{ group: 'nodes', data: { id: 'E1'} },
{ group: 'nodes', data: { id: 'E2'} },
{ group: 'nodes', data: { id: 'E3'} },
{ group: 'nodes', data: { id: 'E4'} },
{ group: 'nodes', data: { id: 'E5'} },
{ group: 'nodes', data: { id: 'E6'} },
{ group: 'nodes', data: { id: 'E7'} },
{ group: 'nodes', data: { id: 'E8'} }  ]);
var eles2 = cy.add([
{ group: 'nodes', data: { id: 'LH1'} },
{ group: 'nodes', data: { id: 'RH1'} },
{ group: 'nodes', data: { id: 'LH2'} },
{ group: 'nodes', data: { id: 'LH3'} },
{ group: 'nodes', data: { id: 'RH2'} },
{ group: 'nodes', data: { id: 'LH4'} },
{ group: 'nodes', data: { id: 'RH3'} },
{ group: 'nodes', data: { id: 'RH4'} } ]);
var eles4 = cy.add([
{ group: 'edges', data: { id: 'edge0', source: 'E4', target: 'E5' } },
{ group: 'edges', data: { id: 'edge1', source: 'E6', target: 'E7' } },
{ group: 'edges', data: { id: 'edge2', source: 'LH1', target: 'E1' } },
{ group: 'edges', data: { id: 'edge3', source: 'LH1', target: 'RH1' } },
{ group: 'edges', data: { id: 'edge4', source: 'LH2', target: 'E4' } },
{ group: 'edges', data: { id: 'edge5', source: 'LH3', target: 'E4' } },
{ group: 'edges', data: { id: 'edge6', source: 'LH4', target: 'E6' } },
{ group: 'edges', data: { id: 'edge7', source: 'RH1', target: 'E2' } },
{ group: 'edges', data: { id: 'edge8', source: 'RH1', target: 'E3' } },
{ group: 'edges', data: { id: 'edge9', source: 'RH2', target: 'E5' } },
{ group: 'edges', data: { id: 'edge10', source: 'RH3', target: 'E7' } },
{ group: 'edges', data: { id: 'edge11', source: 'RH4', target: 'E8' } }  ]);

</script>

    <center>

        <div id="cy"  >
        </div>

    </center>

我的代码实际上是在asp.net页面中生成的，但这没有什么区别。

最佳答案

运行布局后，将元素添加到图形中。这就是为什么所有节点都堆积在左上角的原因。

您有两种选择:

在构造函数上的元素处都提供布局。

首先初始化图形，然后添加元素(例如，使用cy.json())，然后告诉cytoscape使用cy.layout(...).run()运行布局。

cy.layout()的文档是here，cy.json()的文档here。

下面的代码段使用第一种方法，但是如果您不能在构造函数调用中提供元素(即，如果您必须异步获取它们)，我将第二个方法保留为注释。

var nodeArray = [
  { group: 'nodes', data: { id: 'E1'} },
  { group: 'nodes', data: { id: 'E2'} },
  { group: 'nodes', data: { id: 'E3'} },
  { group: 'nodes', data: { id: 'E4'} },
  { group: 'nodes', data: { id: 'E5'} },
  { group: 'nodes', data: { id: 'E6'} },
  { group: 'nodes', data: { id: 'E7'} },
  { group: 'nodes', data: { id: 'E8'} },
  { group: 'nodes', data: { id: 'LH1'} },
  { group: 'nodes', data: { id: 'RH1'} },
  { group: 'nodes', data: { id: 'LH2'} },
  { group: 'nodes', data: { id: 'LH3'} },
  { group: 'nodes', data: { id: 'RH2'} },
  { group: 'nodes', data: { id: 'LH4'} },
  { group: 'nodes', data: { id: 'RH3'} },
  { group: 'nodes', data: { id: 'RH4'} }
];

var edgeArray = [
  { group: 'edges', data: { id: 'edge0', source: 'E4', target: 'E5' } },
  { group: 'edges', data: { id: 'edge1', source: 'E6', target: 'E7' } },
  { group: 'edges', data: { id: 'edge2', source: 'LH1', target: 'E1' } },
  { group: 'edges', data: { id: 'edge3', source: 'LH1', target: 'RH1' } },
  { group: 'edges', data: { id: 'edge4', source: 'LH2', target: 'E4' } },
  { group: 'edges', data: { id: 'edge5', source: 'LH3', target: 'E4' } },
  { group: 'edges', data: { id: 'edge6', source: 'LH4', target: 'E6' } },
  { group: 'edges', data: { id: 'edge7', source: 'RH1', target: 'E2' } },
  { group: 'edges', data: { id: 'edge8', source: 'RH1', target: 'E3' } },
  { group: 'edges', data: { id: 'edge9', source: 'RH2', target: 'E5' } },
  { group: 'edges', data: { id: 'edge10', source: 'RH3', target: 'E7' } },
  { group: 'edges', data: { id: 'edge11', source: 'RH4', target: 'E8' } }
];

var stylesArray = [{
  selector: 'node',
  style: {
    'background-color': '#666',
    'label': 'data(id)'
  }
},{
  selector: 'edge',
  style: {
    'width': 3,
    'line-color': '#ccc',
    'target-arrow-color': '#ccc',
    'target-arrow-shape': 'triangle'
  }
}];

var layout = {name: 'breadthfirst'};

// You used mostly default options, there's no need to redefine them
var cy = cytoscape({
  container: document.getElementById('cy'),
  style: stylesArray,
  // If you want to apply the layout on the constructor
  // you must supply the elements too
  layout: layout,
  elements: {
    nodes: nodeArray,
    edges: edgeArray
  }
});

// Or add the elements afterwards, it's your choice
// But then you need to re-run the layout
/*
cy.json({
  elements: {
    nodes: nodeArray,
    edges: edgeArray
  }
});

// Tell cytoscape to apply the layout when ready
cy.ready(function () {
  cy.layout(layout).run();
});
*/

 #cy {
   width: 90%;
   height: 300px;
   display: block;
 }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"></script>
<div id="cy"></div>