问题描述
我正在使用 cytoscape.js 创建一个图形,并且我在父节点内复合了节点。我想在节点顶部但在节点内部拥有主/父节点的标题。这在细胞景观中可能吗?
我尝试使用 halign 和 valign。每当我使用最高值时,它都会显示在框外。
是否有扩展程序或插件可以让我们这样做?
子节点示例:https://stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts
解决方法
正如您所读到的 here,您只能将标签放置在带有 center 选项的节点内,良好的配置(标签位于顶部)需要在标签中添加边距:
.selector(':parent')
.css({
'text-valign': 'center',// the next line moves the parents label up to the top of the node and 5px down to create a padding
'text-margin-y': function (node) { return -node.height() + 5 }
})
这是一个工作示例:
var cy = cytoscape({
container: document.getElementById('cy'),style: cytoscape.stylesheet()
.selector(':parent')
.css({
'text-valign': 'center','text-margin-y': function(node) {
return -node.height() + 5
}
})
.selector('node')
.css({
'height': 'data(size)','width': 'data(size)','border-color': '#000','border-width': '1','content': 'data(name)'
})
.selector('edge')
.css({
'width': 'data(strength)'
})
.selector('#1')
.css({
'background-color': 'red'
})
.selector('#4')
.css({
'background-color': 'green'
}),elements: {
nodes: [{
data: {
id: '1',size: 50,name: 'a'
}
},{
data: {
id: '2',size: 20,name: 'b',parent: '1'
}
},{
data: {
id: '3',size: 40,name: 'c',{
data: {
id: '4',name: 'd'
}
},{
data: {
id: '5',name: 'e',parent: '4'
}
},{
data: {
id: '6',name: 'f',parent: '4'
}
}
],},});
body {
font: 14px helvetica neue,helvetica,arial,sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
我的理解是你想把父标签放在孩子上面的盒子里?如果我错了,请道歉
如果是这样,我的解决方案是添加一个填充,然后应用边距进行对齐。
样式更新:
-
'padding-top':60
selector: 'node',css: { content: 'data(label)','text-valign': 'center','text-halign': 'center','font-size': 28,'padding-top':60 }
-
'text-valign': 'top', 和 'text-margin-y': function(node) { 返回 node.height() - 10; }
selector: 'node[type="parent"]',style: { shape: 'rectangle','background-color': 'grey',width: 300,height: 100,'font-size': 25.5,'font-family': 'Lato,Helvetica Neue,Helvetica,Arial,sans-serif',color: 'black','text-valign': 'top','text-margin-y': function(node) { return node.height() - 10; } }