admin管理员组文章数量:1430982
I'm having problems getting a very simple cytoscape.js example to work at all. Here is my code in a pastebin link
I'm fairly new to Javascript in general, so this may be a very basic mistake. console.log statements put through the function calls indicate that the cy function is getting properly called and executed, and the browser console doesn't seem t throw any errors, however I cannot get the graph to show. Is there anything that I'm missing in my definition?
I tried to make it as minimalistic as possible. The code is only verbatim copied from some of the cytoscape.js examples. cy.cytoscape is the relevant function. Calling code is at the bottom
$('#cy').cytoscape({
.......
<body>
<div id="cy"></div>
</body>
edit: jsfiddle link
I'm having problems getting a very simple cytoscape.js example to work at all. Here is my code in a pastebin link
I'm fairly new to Javascript in general, so this may be a very basic mistake. console.log statements put through the function calls indicate that the cy function is getting properly called and executed, and the browser console doesn't seem t throw any errors, however I cannot get the graph to show. Is there anything that I'm missing in my definition?
I tried to make it as minimalistic as possible. The code is only verbatim copied from some of the cytoscape.js examples. cy.cytoscape is the relevant function. Calling code is at the bottom
$('#cy').cytoscape({
.......
<body>
<div id="cy"></div>
</body>
edit: jsfiddle link
Share Improve this question edited May 30, 2014 at 2:37 Proto asked May 30, 2014 at 2:28 ProtoProto 771 silver badge9 bronze badges 3- JSFiddle normally works better... – epascarello Commented May 30, 2014 at 2:29
- 2 Have you got this minimalistic version working? Have you got any basic code working yet? – rhughes Commented May 30, 2014 at 2:38
- Ok. I got it to work after looking at some other Cytoscape.js examples in JSFiddle (great resource, thx for the tip). In this case what I was missing was a css style definition. By only that the example works now. – Proto Commented May 30, 2014 at 2:42
1 Answer
Reset to default 4I have made some changes in your code.Now it is working fine. Please look at the link below
CSS
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
JavaScript
$(function() { // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [{
data: {
id: 'j',
name: 'Jerry'
}
}, {
data: {
id: 'e',
name: 'Elaine'
}
}, {
data: {
id: 'k',
name: 'Kramer'
}
}, {
data: {
id: 'g',
name: 'George'
}
}],
edges: [{
data: {
source: 'j',
target: 'e'
}
}, {
data: {
source: 'j',
target: 'k'
}
}, {
data: {
source: 'j',
target: 'g'
}
}, {
data: {
source: 'e',
target: 'j'
}
}, {
data: {
source: 'e',
target: 'k'
}
}, {
data: {
source: 'k',
target: 'j'
}
}, {
data: {
source: 'k',
target: 'e'
}
}, {
data: {
source: 'k',
target: 'g'
}
}, {
data: {
source: 'g',
target: 'j'
}
}]
},
ready: function() {
window.cy = this;
// giddy up...
cy.elements().unselectify();
cy.on('tap', 'node', function(e) {
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e) {
if (e.cyTarget === cy) {
cy.elements().removeClass('faded');
}
});
}
});
}); // on dom ready
HTML
<script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
<div id="cy"></div>
</body>
本文标签： javascriptHow to get cytoscapejs to workStack Overflow
版权声明：本文标题：javascript - How to get cytoscape.js to work - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745552347a2663000.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论