如何在react-cytoscape中根据classes属性设置不同形状的节点？

我希望基于classes属性为Cytoscape节点设置不同的形状，当前配置如下：

Elements 配置 #

const elements = [
    { data: { id: "p1", label: "Node 1", classes: "place" } },
    { data: { id: "t1", label: "Transition", classes: "transitions" } },
    { data: { id: "t2", label: "Transition2", classes: "transitions" } },
    { data: { id: "p2", label: "Place 2", classes: "place" } },
    { data: { id: "p3", label: "Place 3", classes: "place" } },
    { data: { source: "p1", target: "t1" } },
    { data: { source: "t1", target: "p2" } },
    { data: { source: "t1", target: "p3" } },
    { data: { source: "p2", target: "t2" } },
    { data: { source: "p3", target: "t2" } },
];

样式配置 cyStyle #

const cyStyle = [
    {
      selector: ".place", 
      style: {
        "background-color": "blue",
        shape: "ellipse",
      },
    },
    {
      selector: ".transitions",
      style: {
        "background-color": "red",
        shape: "rectangle",
      },
    },
    {
      selector: "edge",
      style: {
        width: 3,
        "line-color": "#ccc",
        "target-arrow-color": "#ccc",
        "target-arrow-shape": "triangle",
        "curve-style": "bezier",
      },
    },
];

目前边的样式已生效，设置selector: "nodes"时节点样式也能正常显示，但无法让两类不同class的节点呈现不同形状，请问该如何实现这一需求？

问题核心是你把classes属性放在了节点的data对象内，而Cytoscape识别节点类名的正确位置是节点对象的根层级，而非data子对象中。

方案一：调整classes的位置（推荐） #

修改Elements配置，将classes从data中移到节点对象的根层级：

const elements = [
    { data: { id: "p1", label: "Node 1" }, classes: "place" },
    { data: { id: "t1", label: "Transition" }, classes: "transitions" },
    { data: { id: "t2", label: "Transition2" }, classes: "transitions" },
    { data: { id: "p2", label: "Place 2" }, classes: "place" },
    { data: { id: "p3", label: "Place 3" }, classes: "place" },
    { data: { source: "p1", target: "t1" } },
    { data: { source: "t1", target: "p2" } },
    { data: { source: "t1", target: "p3" } },
    { data: { source: "p2", target: "t2" } },
    { data: { source: "p3", target: "t2" } },
];

修改后，Cytoscape就能正确匹配.place和.transitions类选择器，对应的节点形状、颜色样式会分别生效。

方案二：使用属性选择器（备选） #

如果需要保留data中的classes字段，可以改用属性选择器来匹配：

// Elements配置保持不变
const elements = [
    { data: { id: "p1", label: "Node 1", classes: "place" } },
    // ...其他节点
];

// 样式配置替换为属性选择器
const cyStyle = [
    {
      selector: '[data-classes="place"]', 
      style: {
        "background-color": "blue",
        shape: "ellipse",
      },
    },
    {
      selector: '[data-classes="transitions"]',
      style: {
        "background-color": "red",
        shape: "rectangle",
      },
    },
    {
      selector: "edge",
      style: {
        width: 3,
        "line-color": "#ccc",
        "target-arrow-color": "#ccc",
        "target-arrow-shape": "triangle",
        "curve-style": "bezier",
      },
    },
];

这种方式不需要调整节点结构，但类选择器的写法更符合Cytoscape的常规用法，因此优先推荐方案一。

内容的提问来源于stack exchange，提问作者Ali.Suleiman