我正在尝试使用“内容”和下方的文本标签来显示在节点中心具有字体图标的节点。
我的造型目前是:
{
'selector': 'node[icon]',
'style': {
'content': 'data(icon)',
'font-family': 'Material Icons',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
'selector': 'node[label]',
'style': {
'label': 'data(label)',
'text-valign': 'bottom',
'text-halign': 'center'
}
}
但是,这不起作用,因为我假设这两种样式都用于一个元素(节点)。
我考虑了几种解决方案,例如:
前两个看起来很“hacky”,第三个可能会导致很多对齐问题。有没有更好的解决方案?
最佳答案
我找到了使用扩展名的解决方案:https://github.com/kaluginserg/cytoscape-node-html-label .
您可以为不干扰基本 Cytoscape 标签的节点创建自定义 HTML 标签。使用 Material 图标的示例:
// Initialise the HTML Label
this.cy.nodeHtmlLabel([{
query: '.nodeIcon',
halign: 'center',
valign: 'center',
halignBox: 'center',
valignBox: 'center',
tpl: (data) => {
return '<i class="material-icons">' + data.icon + '</i>';
}
}]);
// Add the HTML Label to the node:
const node = {
group: 'nodes',
data: {
id: data.id,
label: data.label,
icon: data.icon
},
classes: 'nodeIcon' // <---- Add the HTML Label class here
};
使用该方法,您可以动态创建带有字体图标的节点,而无需下载大量图像。
您甚至可以添加 CSS 样式来更改图标的颜色:
关于cytoscape.js - 节点上的内容和标签 - Cytoscape,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54115476/