Cytoscape.js如何在初始化阶段按ID设置特定节点样式规则？

嗨，这个需求我太熟了！其实完全不用等到运行时再去修改，你可以直接在初始化的style数组里添加针对特定节点ID的样式规则，一步到位。

Cytoscape的样式系统支持多规则叠加，而且ID选择器（#节点ID）的优先级比通用node选择器更高，所以专属样式会自动覆盖全局的默认配置。

具体实现代码 #

你只需要在原来的style数组里新增一个规则对象，把selector设为'#my_first_node'，然后定义你想要的专属样式即可：

style: [
  // 全局节点样式
  {
    selector: 'node',
    style: {
      'label': 'data(name)',
      'font-size':'16',
      'color': 'white',
      'text-valign': 'center',
      'width': 'label',
      'height': 'label',
      'background-color': '#30c9bc',
      'shape':'roundrectangle'
    }
  },
  // 针对my_first_node的专属样式
  {
    selector: '#my_first_node',
    style: {
      'font-size': '30', // 覆盖全局的16号字体
      'background-color': '#ff6b6b', // 可选：额外修改背景色
      'border-width': '2',
      'border-color': '#ffffff'
    }
  }
]

小提示 #

• 不需要重复写全局已经定义的属性，只写你想要覆盖或者新增的样式就行，Cytoscape会自动合并规则。
• ID选择器优先级最高，所以这里的样式会覆盖全局node样式里的同名属性，没覆盖的属性依然沿用全局配置。

这样初始化完成后，my_first_node节点就会直接应用专属样式，不用再在运行时额外执行修改代码啦！

内容的提问来源于stack exchange，提问作者haz