除data和position外，可存储API响应数据的Cytoscape元素属性有哪些？

除了你提到的data和position，Cytoscape元素还支持以下几个属性来存储API返回的数据，不同属性适配不同场景：

• group：显式指定元素属于节点组（'nodes'）还是边组（'edges'）。虽然Cytoscape会自动根据data里的source/target字段判断元素类型，但如果API返回了明确的元素类型标识，存到这里可以避免自动判断的歧义。
• classes：接受字符串或字符串数组，用于给元素添加CSS类名。适合存储API返回的元素分类、标签信息，后续能通过Cytoscape CSS统一设置这类元素的样式。
• scratch：专门用于存储临时或业务辅助数据的对象。这里的内容不会被Cytoscape的核心渲染、交互逻辑处理，非常适合存放API返回的业务元数据、唯一标识、状态信息等不需要影响元素外观/行为的数据。
• selected：布尔值，标记元素是否处于选中状态。如果API返回了元素的选中状态配置，可以直接赋值到这里。
• locked：布尔值，控制元素是否可被拖拽。API返回的元素锁定状态可以存在这里。
• grabbable：布尔值，控制元素是否可被抓取拖拽。同样适合存储API返回的交互权限配置。

示例代码（结合API数据） #

elements=[
  {
    'data': {'id': 'one', 'label': 'Node 1'},
    'position': {'x': 75, 'y': 75},
    'classes': 'api-imported priority-high', // 存储API返回的分类标签
    'scratch': { 'apiNodeId': 'node_123', 'lastSync': '2024-05-20', 'status': 'active' }, // 存储API业务数据
    'selected': true, // API返回的选中状态
    'locked': false // API返回的锁定状态
  },
  {
    'data': {'id': 'two', 'label': 'Node 2'},
    'position': {'x': 200, 'y': 200},
    'group': 'nodes', // 显式指定元素组
    'grabbable': true,
    'scratch': { 'apiNodeId': 'node_456', 'metadata': {'owner': 'team-a'} }
  },
  {
    'data': {'source': 'one', 'target': 'two'},
    'classes': 'direct-connection',
    'scratch': { 'apiEdgeId': 'edge_789', 'weight': 0.8 } // 存储API返回的边权重数据
  }
];

其中scratch是最推荐用来存储API响应中业务数据的属性，因为它完全独立于Cytoscape的核心逻辑，不会和元素的渲染、交互行为产生冲突。

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