Cytoscape.js中如何访问键名含冒号的节点数据字段

• 常规使用Cytoscape.js时，键名为普通字符串的节点数据可通过data(键名)语法正常读取，用于配置节点标签
• 当数据键名包含冒号时（如示例中的skos:prefLabel），常规写法失效，尝试给键名包裹单/双引号、使用JS方括号取值等方案均无法正常读取字段，预期节点标签显示值为aa、bb
• 通过原生JS语法可直接读取到实例中存储的对应字段值，确认数据已正确加载，问题出在样式映射的写法上

复现代码 #

<html>
  <head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.2/cytoscape.min.js"></script>
  </head>

  <style>
    #cy {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>

  <body>
    <div id="cy"></div>
    <script>
      var cy = cytoscape({
        container: document.getElementById("cy"),
        elements: [
          { data: { "id": "a", "skos:prefLabel": "aa" } },
          { data: { "id": "b", "skos:prefLabel": "bb" } },
          { data: {
              id: "ab",
              source: "a",
              target: "b",
            },
          },
        ],
        style: [
          {
            selector: "node",
            style: {
              "shape": "square",
              "background-color": "red",
              "label": "data(skos:prefLabel)" 
            },
          },
        ],
      });
      // 此处控制台可正常输出字段值，确认数据已正确存入实例
      console.log(cy._private.elements[1]._private.data["skos:prefLabel"]);
    </script>
  </body>
</html>

将样式配置中label对应的data映射写法修改为：

"label": "data([skos:prefLabel])"

修改后节点标签即可正确读取到带冒号键名的字段值，显示预期的aa、bb。

原理说明 #

Cytoscape.js的data()样式映射语法中，冒号默认被解析为命名空间分隔符，未加包裹时，引擎会将skos:prefLabel识别为skos命名空间下的prefLabel字段，和实际存储的完整键名不匹配。按照语法规则，包含特殊字符的字段名需要放在方括号内，引擎才会将括号内的整段内容识别为完整键名。
此前尝试的加引号、原生JS方括号取值写法不生效，是因为不符合data()函数的解析规则，无法被样式引擎识别。

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