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等常规选择器。

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

1 个答案: