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

Question

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

  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 样式。

在我心中有两种方法。 最好是使用 function 样式

    .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