我正在尝试运行一些使用 cytoscape.js 的代码。问题是,在我运行文件后,有时它确实会显示图表,但大多数时候不会。
我目前正在使用 Eclipse Luna,此代码位于 jsp 文件中。
这是我的代码:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
<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>
<script type="text/javascript">
$(function(){
var cy = cytoscape({
container: $('#cy')[0],
boxSelectionEnabled: true,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'text-outline-color': 'black'
}),
elements: {
nodes: [
{ data: { id: 'a', name: 'Sheraton Cherry' } },
{ data: { id: 'a1', name: 'Rosacea'}},
{ data: { id: 'a2', name: 'Dentate' } },
{ data: { id: 'a3', name: 'Pinnate' } },
{ data: { id: 'b', name: 'Pineapple Guava' } },
{ data: { id: 'b1', name: 'Myrtaceae'}},
{ data: { id: 'b2', name: 'Entire' } },
{ data: { id: 'a3', name: 'Pinnate' } }
],
edges: [
{ data: { source: 'a1', target: 'a' }},
{ data: { source: 'a2', target: 'a' }},
{ data: { source: 'a3', target: 'a' }},
{ data: { source: 'b1', target: 'b'}},
{ data: { source: 'b2', target: 'b'}},
{ data: { source: 'a3', target: 'b'}}
]
},
layout: {
name: 'circle',
padding: 30
}
});
});
</script>
</head>
<body>
</body>
</html>