使用cytoscape.js如何同时显示节点之间的箭头和自定义标签
With cytoscape.js how to show simultaneously arrows and custom labels for the arcs between nodes?
使用cytoscape.js我想同时获得两种效果:
- 到为节点和 之间的弧线显示有向箭头
- 到显示节点间弧线的定制标签。
使用下面可用的代码,我只能得到显示的弧标签,而不是箭头。
如果我从代码中删除段
style: {'label': 'data(label)'},
那么我可以得到箭头显示,但弧标签消失。
我计划在各种独立的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>
指定一个密钥—style
或css
密钥—但不能同时指定两个。
style: {
'label': 'data(label)',
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': 'black',
'width': 3
}
相关文章:
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- 不使用自定义CSS或HTML(使用框架方法)的角度材质文本输入或文本区域标签大小
- 在javascript中调用自定义谷歌搜索标签时出现问题
- 如何为javascript创建自定义标签?或者这是我不知道的其他事情吗;我不知道
- 圆环饼图中数据标签的自定义CSS类
- 动态自定义文本堆栈标签Highcharts
- 我使用谷歌标签管理器在我的网站上启动标签.变量“;未定义的“;在任何版本的Internet Explorer的自定义代码
- 如果JavaScript标签是通过谷歌标签管理器插入到页面上的,那么它们的延迟程度是多少;s的自定义HTML
- 如何在没有代码隐藏访问权限的情况下将自定义 HTML 属性添加到 ASP.NET 标签
- 将图表工具提示自定义为标签,其中线条指向饼图段
- 需要帮助从数组制作折线图,我想要自定义刻度标签
- JQPLOT 根据标签名称为饼图设置自定义颜色
- Google 地图使用自定义标签对地址进行地理编码
- 高图表自定义 xAxis 标签
- 允许 HTML 的角度树视图中的自定义标签
- 是否可以使用自定义标签代替
标签
- 自定义 Joomla 3.x 标签页面
- 我可以在 RichFace 中为文件上传实现多个文件选择,或者使用 javascript 为此实现自定义标签吗?
- D3.js如何在水平对数缩放轴上放置自定义标签
- 使用 Javascript 更改 Google 自定义搜索中的标签页