与元素相关联的数据属性上的选择器

Question

我正在尝试使用选择器根据与节点关联的数据过滤 cytoscape.js 中的节点。

我似乎无法过滤作为数据添加到节点的属性的 "sub"-属性数据。

cy.nodes("[type = 'typeA']")          - works
cy.nodes("[metadata.type = 'typeA']") - fails

我试过转义“\\”。但一直无法让它发挥作用。

{
  "data": {
    "id": "run-jmh",
    "metadata": {
      "type": "typeA",
    }
    "type": "typeA",
  },
  "position": {
    "x": 550,
    "y": 23
  },
  "group": "nodes",
  "removed": false,
  "selected": false,
  ...
}

Answer 1

选择器字符串不支持任意 JS 语法，所以像 foo.bar 或 foo['bar'] 这样的东西是行不通的。选择器实际上仅用于简单的顶级数据字段，类似于您在 HTML.

中对属性使用选择器的方式

如果您需要更复杂、任意的逻辑，您可以使用函数来设置样式属性值，例如：

cytoscape({
  container: document.getElementById('cy'),

  // ...

  style: cytoscape.stylesheet()
    .selector('node')
      .style({
        'background-color': function( ele ){ return ele.data('bg') }

        // which works the same as

        // 'background-color': 'data(bg)'
      })

      // ...


  // , ...
});

参考：http://js.cytoscape.org/#style/format

在这种情况下，您将在函数中将元素分类为匹配或不匹配等，以及像 node.

这样的通用选择器

与元素相关联的数据 属性 上的选择器

Selector on property of data associated with a element

cytoscape.js

与元素相关联的数据属性上的选择器