Javascript 我能'；我根本无法让cytoscape.js显示我的图表

我使用JavaScript图表程序cytoscape.js在web页面中构建了一个图表。它根本不显示任何内容。但它也没有给出语法错误，只是警告说为了缩放而接管鼠标

代码如下：

     <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>

#赛义德{
宽度：90%；
高度：300px；
显示：块；
}
var cy=细胞景观({
容器：document.getElementById（'cy'），//要在其中呈现的容器
样式：[//图形的样式表
{
选择器：'节点'，
风格：{
“背景色”：“666”，
'标签'：'数据（id）'
}
},
{
选择器：'边'，
风格：{
“宽度”：3，
“线条颜色”：“ccc”，
“目标箭头颜色”：“ccc”，
“目标箭头形状”：“三角形”
}
}
],
//初始视口状态：
缩放：1，
平移：{x:0，y:0}，
//交互选项：
最小缩放：1e-50，
maxZoom:1e50，
zoomingEnabled:true，
userZoomingEnabled:true，
已启用平移：true，
userPanningEnabled:true，
boxSelectionEnabled:正确，
selectionType:'single'，
接触阈值：8，
桌面访问阈值：4，
自动锁定：错误，
自动取消冻结：错误，
自动取消选择：false，
//渲染选项：
无头：错，
styleEnabled:true，
hideEdgesOnViewport:false，
纹理视口：false，
motionBlur:错，
运动模糊不透明度：0.2，
车轮灵敏度：1，
像素比率：“自动”
});
让选项={
名称：“面包第一”，
fit:true，//是否使视口适合图形
directed:false，//树是否向下（如果false，则边可以指向任何方向）
填充：30，//适合填充
圆：false，//如果为true，则将深度放在同心圆中，如果为false，则将深度放在上下
grid:false，//是否创建放置DAG的偶数栅格（圆圈：仅限false）
间距因子：1.75，//正间距因子，越大=>节点之间的空间越大（注意：如果导致重叠，则不适用）
boundingBox:undefined，//约束布局边界；{x1，y1，x2，y2}或{x1，y1，w，h}
avoidOverlap:true，//防止节点重叠，如果没有足够的空间，可能会溢出边界框
nodeDimensionsIncludeLabels:false，//在计算布局算法的节点边界框时排除标签
根：未定义，//树的根
maximal:false，//是否将节点向下移动其自然BFS深度以避免向上边缘（仅限DAG）
animate:false，//是否转换节点位置
animationDuration:500，//如果启用，动画的持续时间（毫秒）
animationEasing：未定义，//如果启用，则动画的缓和，
animateFilter:function（node，i）{return true；}，//一个函数，用于确定是否应为节点设置动画。默认情况下，启用animate时所有节点都设置了动画。当布局启动时，将立即定位未设置动画的节点
就绪：未定义，//在layoutready上回调
停止：未定义，//在layoutstop上回调
变换：函数（节点，位置）{return position；}//变换给定的节点位置。用于在离散布局中更改流向
};
cy.布局（选项）；
var eles1=cy.add([
{组：'nodes'，数据：{id:'E1'}，
{组：'nodes'，数据：{id:'E2'}}，
{组：'nodes'，数据：{id:'E3'}}，
{group:'nodes'，data:{id:'E4'}}，
{组：'nodes'，数据：{id:'E5'}}，
{组：'nodes'，数据：{id:'E6'}}，
{组：'nodes'，数据：{id:'E7'}}，
{group:'nodes'，data:{id:'E8'}}}]）；
var eles2=cy.add([
{组：'nodes'，数据：{id:'LH1'}}，
{组：'nodes'，数据：{id:'RH1'}}，
{组：'nodes'，数据：{id:'LH2'}}，
{组：'nodes'，数据：{id:'LH3'}，
{组：'nodes'，数据：{id:'RH2'}}，
{组：'nodes'，数据：{id:'LH4'}}，
{组：'nodes'，数据：{id:'RH3'}，
{group:'nodes'，data:{id:'RH4'}}}]）；
变量eles4=cy.add([
{组：'edges'，数据：{id:'edge0'，源：'E4'，目标：'E5'}，
{组：'edges'，数据：{id:'edge1'，源：'E6'，目标：'E7'}，
{组：'edges'，数据：{id:'edge2'，源：'LH1'，目标：'E1'}，
{组：'edges'，数据：{id:'edge3'，源：'LH1'，目标：'RH1'}，
{组：'edges'，数据：{id:'edge4'，源：'LH2'，目标：'E4'}，
{组：'edges'，数据：{id:'edge5'，源：'LH3'，目标：'E4'}，
{组：'edges'，数据：{id:'edge6'，源：'LH4'，目标：'E6'}，
{组：'edges'，数据：{id:'edge7'，源：'RH1'，目标：'E2'}，
{组：'edges'，数据：{id:'edge8'，源：'RH1'，目标：'E3'}，
{组：'edges'，数据：{id:'edge9'，源：'RH2'，目标：'E5'}，
{组：'edges'，数据：{id:'edge10'，源：'RH3'，目标：'E7'}，
{组：'edges'，数据：{id:'edge11'，源：'RH4'，目标：'E8'}}]；

---

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

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

您有两种选择：

在构造器上的元素处提供两种布局

首先初始化图形，然后添加元素（例如us