如何使cytoscape.js工作
如何使cytoscape.js工作
提问于 2014-05-30 02:28:41
我在获取一个非常简单的cytoscape.js示例时遇到了问题。下面是我在pastebin链接中的代码
总的来说，我对Javascript相当陌生，所以这可能是一个非常基本的错误。函数调用中的console.log语句表明cy函数正在被正确调用和执行，浏览器控制台似乎没有抛出任何错误，但是我无法获得要显示的图形。在我的定义中有什么东西我遗漏了吗？
我试着使它尽可能的简约。代码仅从一些cytoscape.js示例中逐字复制。cy.cytoscape是相关的功能。调用代码在底部。
$('#cy').cytoscape({
.......
<body>
<div id="cy"></div>
</body>编辑：琴键
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-30 02:59:26
我对你的code.Now做了一些修改请看下面的链接
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 readyHTML
<script src="http://ajax.googleapis.com/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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23946108
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号