hello.js http://pastebin.com/2frsHc9g hello.html http://pastebin.com/10EYyJ74
但我无法使其发挥作用
这是我在网络浏览器控制台中可以看到的错误:
on render zavolana hello.js:9 ss [object Object] debug.js:41 Tracker afterFlush函数的异常:debug.js:41 TypeError: 无法读取未定义的属性“addEventListener” at CanvasRenderer.registerBinding(infinitedg_cytoscape.js:17127) 在CanvasRenderer.load(infinitedg_cytoscape.js:17283) 在新的CanvasRenderer(infinitedg_cytoscape.js:13419) at $$。fn.core.initRenderer(infinitedg_cytoscape.js:7527) 在新的$$。核心(infinitedg_cytoscape.js:6592) 在函数。$$。init(infinitedg_cytoscape.js:75) 在cytoscape(infinitedg_cytoscape.js:58) 在HTMLDivElement。 (infinitedg_cytoscape.js:2808) 在Function.jQuery.extend.each(jquery.js:384) 在jQuery.fn.jQuery.each(jquery.js:136)
你有没有请一些关于cytoscape和流星组合的“你好世界”?
答案 0 :(得分:3)
问题是通过meteor安装了错误的库
安装正确的cytoscape库后,它正在运行
正确的是cytoscape:cytoscape
这里是最小的并且正在工作example:
<强> 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>