在cytoscape.js中为不同的节点设置不同的形状

Set different shapes for different nodes in cytoscape.js

本文关键字：设置 节点 cytoscape js      更新时间：2023-09-26

我有以下字段作为我的节点数据：

nodes {
    data: {id: "something",     type: "human"}
    data: {id: "somethingElse", type: "mouse"}
}

有什么方法可以根据data中的type设置节点的形状吗？

您可以构造cytoscape样式元素和选择器，如下面的代码片段所示：

style: [
  {
    selector: 'node[type="human"]',
    style: {
      'shape': 'triangle',
      'background-color': 'red'
    }
  },
  {
    selector: 'node[type="mouse"]',
    style: {
      'shape': 'square',
      'background-color': 'blue'
    }
  }
]

使用带有适当选择器的样式表，例如：

node[type = 'foo'] {
  background-color: red;
  shape: star;
  /* ... */
}
相关文章：