CytoScape.js和Meteor简单的例子不起作用

cytoscape.js & meteor simple example doesnt work

本文关键字：不起作用 简单 js Meteor CytoScape      更新时间：2023-09-26
  1. 我添加到 Meteor Cytoscape ： Infinitedg：Cytoscape
  2. 我有非常基本的流星应用程序：

你好.js http://pastebin.com/2frsHc9g你好.html http://pastebin.com/10EYyJ74

但我无法让它工作

这是我在网络浏览器控制台中看到的错误：

on render zavolana hello.js：9 ss [object object] debug.js：41 来自跟踪器刷新后函数的异常：调试.js：41 类型错误： 无法读取未定义的属性"addEventListener" at CanvasRenderer.registerBinding （infinitedg_cytoscape.js：17127） at CanvasRenderer.load （infinitedg_cytoscape.js：17283） 在新的画布渲染器（infinitedg_cytoscape.js：13419） at $$.fn.core.initRenderer （infinitedg_cytoscape.js：7527） 在新的$$。核心 （infinitedg_cytoscape.js：6592） at Function.$$.init （infinitedg_cytoscape.js：75） 在细胞景观 （infinitedg_cytoscape.js：58） at HTMLDivElement.（infinitedg_cytoscape.js：2808） at Function.jQuery.extend.each （jquery.js：384） at jQuery.fn.jQuery.each （jquery.js：136）

你有没有一些细胞景观和流星结合的"你好世界"？

问题是通过 meteor 安装错误的库

在我安装了正确的细胞景观库后，它正在工作

正确的是细胞特性：细胞观

这是最小和工作示例：

.JS 

sit = "" //hlavni objekt
if (Meteor.isClient) {


    Template.graf.rendered = function() {
        // Meteor.defer(function() {
        //setTimeout(function(){
        console.log("on rendered called");
        //var divcy = $('#cy');
        // console.log("ss " + divcy);
        sit = cytoscape({
            container: document.getElementById('cy'),

            ready: function() {
                console.log("network ready");
                updateNetworkData(sit); // load data when cy is ready
            },
            style: cytoscape.stylesheet()
                .selector('node')
                .style({
                    'content': function(e) {
                        return e.data("name")
                    },
                    'font-size': 12,
                    'text-valign': 'center',
                    'color': 'white',
                    'text-outline-width': 2,
                    'text-outline-color': function(e) {
                        return e.locked() ? "red" : "#888"
                    },
                    'min-zoomed-font-size': 8
                        // 'width': 'mapData(score, 0, 1, 20, 50)',
                        // 'height': 'mapData(score, 0, 1, 20, 50)'
                })
                .selector('edge')
                .style({
                    'content': function(e) {
                        return e.data("name") ? e.data("name") : "";
                    },
                    'target-arrow-shape': 'triangle',
                })

        });
        //})
    }


}
if (Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

function updateNetworkData(net) {
    // init Data
    var nodes = [{ // node a
            group: 'nodes',
            data: {
                id: 'a',
                name:'a'
            }
        }, { // node b
            group: 'nodes',
            data: {
                id: 'b',
              name:'b'
            }
        }
    ]
    var edges = [{ // edge ab
            group: 'edges',
            data: {
                id: 'ab',
              name:'ab',
                source: 'a',
                target: 'b'
            }
        }
    ]
    net.elements().remove(); // make sure evything is clean
    net.add(nodes);
    net.add(edges);
    net.reset() // render layout
}

.CSS

#cy {
  width : 70vw;
  height: 50vw;
  position: absolute;
}

.HTML

<head>
  <title>hello</title>
</head>
<body>
  <h1>Welcome to Meteor!b</h1>
  {{>graf}}
</body>
<template name="graf">
  <div id="cy"></div>
</template>
相关文章：