代码之家 › 专栏 › 技术社区 › sfriberg

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

cytoscape.js

sfriberg · 技术社区 · 10 年前

我正在尝试使用选择器来过滤细胞结构中的节点。js,这取决于与节点关联的数据。

我似乎无法过滤作为数据添加到节点的属性的“子”属性的数据。

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,
  ...
}

1 回复 | 直到 10 年前

maxkfranz 10 年前

选择器字符串不支持任意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 .