cytoscape.js - 节点上的内容和标签 - Cytoscape

Question

我正在尝试使用“内容”和下方的文本标签来显示在节点中心具有字体图标的节点。

我的造型目前是:

{
  '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'
  }
}

但是，这不起作用，因为我假设这两种样式都用于一个元素(节点)。

我考虑了几种解决方案，例如:

将标签放在父节点上

使用 Popper.js 或类似工具显示标签

使用多行标签

前两个看起来很“hacky”，第三个可能会导致很多对齐问题。有没有更好的解决方案？

Answer 1

我找到了使用扩展名的解决方案: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 样式来更改图标的颜色: