С помощьюcytoscape.js я хочу получить два эффекта одновременно:
- чтобы показать направленные стрелки для дуг между узлами И
- чтобы показывать настраиваемые метки для дуг между узлами.
С кодом, доступным ниже, я могу отображать только метки дуг, но не стрелки.
Если я удалю из кода сегмент
стиль: {'метка': 'данные (метка)'},
тогда я могу заставить показывать стрелки, но метки дуг исчезают.
Я планирую использовать свой код в относительно сложной системе различных отдельных js-библиотек и т. д., и поэтому я хотел бы услышать решение, которое можно гибко использовать в различных условиях. Спасибо за вашу помощь.
<!DOCTYPE>
<html>
<head>
<title>cytoscape-springy.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="jquery.min.js"></script>
<script src="cytoscape.min.js"></script>
<script src="springy.js"></script>
<script src="./cytoscape-springy.js"></script>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
// left: 0;
// top: 0;
z-index: 999;
}
</style>
<script>
$(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'springy',
directed: true
},
style: [
{
selector: 'node',
css: {
'content': 'data(name)'
}
},
{
selector: 'edge',
// to get a custom label shown for each arc
style: {
'label': 'data(label)'
},
// to get an arrowhead shown for each arc
css: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': 'black',
'width': 3
}
}
],
elements: {
nodes: [
{ data: { id: 'a', name: 'a' } },
{ data: { id: 'b', name: 'b' } },
{ data: { id: 'c', name: 'c' } }
],
edges: [
{ data: { source: 'a', target: 'b', label: 'a_to_b' } },
{ data: { source: 'b', target: 'c', label: 'b_to_c' } },
{ data: { source: 'c', target: 'a', label: 'c_to_a' } }
]
},
});
});
</script>
</head>
<body>
<h1>cytoscape-springy demo</h1>
<div id="cy"></div>
</body>
</html>
