Cytoscape.js cy.style(): 替换选择器而不是添加

Question

我写了一个简单的边缘编辑功能，因为我无法安装扩展。这是我在每次控制节点移动时所做的：

  this.cy.style().selector(`[id = '${id}']`).style({
     'control-point-distances': bendDistances.join(' '),
     'control-point-weights': bendWeights.join(' ')
  }).update()

id 是活动边的id。如果选择器相同，我希望每次调用此代码时都能替换匹配的 'control-point-distances' 和 'control-point-weights'。然而事实并非如此。我以我的序列化风格得到这个：

{"selector":"[id = \"6\"]","style":{"control-point-distances":"107px -50px","control-point-weights":"-0.082 0.8"}},
{"selector":"[id = \"6\"]","style":{"control-point-distances":"107px 53px","control-point-weights":"-0.082 0.499"}},
{"selector":"[id = \"6\"]", ...

如何替换核心上的相同选择器？或者我如何检查它们是否存在并先删除它们？

Answer 1

您目前无法更新 cytoscape.js 样式。

我的想法有两种。最好是使用函数样式

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

在这里你应该检查边的id并做相应的事情。检查“函数格式”https://js.cytoscape.org/#style/format

第二种方法是始终重置样式。

cy.style()
  .clear() // start a fresh stylesheet without even the default stylesheet

  // define all basic styles for node
  .selector('node')
    .style('background-color', 'magenta')

  // define all basic styles for edge
  .selector('edge')
      .style({
      'width': 3,
      'line-color': 'yellow'
    })

  // ...

  .update() // indicate the end of your new stylesheet so that it can be updated on elements
;

勾选https://js.cytoscape.org/#cy.style

Cytoscape.js cy.style(): 替换选择器而不是添加

Cytoscape.js cy.style(): replace selector instead of adding

cytoscape.js