cytoscape.js 和流星简单示例不起作用答案

【问题标题】：cytoscape.js & meteor simple example doesnt workcytoscape.js 和流星简单示例不起作用
【发布时间】：2016-01-19 22:41:16
【问题描述】：

我添加到流星细胞景观：infinitedg:cytoscape
我有非常基本的流星应用程序：

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

但我无法让它工作

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

在渲染 zavolana hello.js:9 ss [object Object] debug.js:41 来自 Tracker afterFlush 函数的异常：debug.js:41 TypeError: 无法读取未定义的属性“addEventListener” 在 CanvasRenderer.registerBinding (infinitedg_cytoscape.js:17127) 在 CanvasRenderer.load (infinitedg_cytoscape.js:17283) 在新的 CanvasRenderer (infinitedg_cytoscape.js:13419) 在 $$.fn.core.initRenderer (infinitedg_cytoscape.js:7527) 在新的 $$.Core (infinitedg_cytoscape.js:6592) 在 Function.$$.init (infinitedg_cytoscape.js:75) 在 cytoscape (infinitedg_cytoscape.js:58) 在 HTMLDivElement。 (infiniteg_cytoscape.js:2808) 在 Function.jQuery.extend.each (jquery.js:384) 在 jQuery.fn.jQuery.each (jquery.js:136)

你有没有细胞景观和流星组合的“你好世界”？

【问题讨论】：

标签： javascript meteor cytoscape.js cytoscape-web

【解决方案1】：

问题是通过流星安装了错误的库

在我安装了正确的 cytoscape 库后，它就可以工作了

正确的是 cytoscape:cytoscape

这是最小的工作example：

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>

【讨论】：

1 更正 - 最初我写的是“正确的是 maxkfranz:cytoscape”，但 maxkfranz 将其编辑为“正确的是 cytoscape:cytoscape”。不幸的是，此示例不适用于“cytoscape:cytoscape”，但适用于 maxkfranz:cytoscape .. 我正在检查原因，并将更新答案以适应它.. 我猜 maxkfranz 想用于未来的 cytoscape:cytoscape
我放弃了尝试让流星包 cytoscape:cytoscape.js 工作......我没有足够的 javascript 经验来找到原因。我所看到的我可以使 cytoscape:cytoscape.js 仅与布局“圆圈”一起使用...我无法使 cose 正常工作...我也无法添加任何其他内容（例如 cose-bilkent ）简而言之，这个示例仅适用使用 maxkfranz:cytoscape ，我正在尝试对 cytoscape.js 问题跟踪器进行更好的描述...
我还发现 cytoscape:cytoscape 在 Meteor 上不起作用。 maxkfranz:cytoscape 确实如此，但我发现也很难为此实现很多功能。从头开始构建网页似乎要容易得多。
@thegreenfrog - 实际上我正在前进......我会在一周或两周内更新我的两个问题......