仅增加选定边的宽度 (cytoscape.js)

Question

当我 select 一些连接的节点或简单的边缘时，如何预定义以使 selected 边缘的宽度更大，而不影响其余边缘整个网络还是节点的宽度？

我在节点或边 selected 时预定义了这个：

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'red',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      })...

但是没有'line-width'，所以如果我输入'width': 5它会把它应用到所有的边和节点。

那么我怎样才能在 selected 时修改边缘宽度并使图形的其余部分保持不变？

提前致谢！

Answer 1

Cytoscape.js → Selectors

...A selector functions similar to a CSS selector on DOM elements, but selectors in Cytoscape.js instead work on collections of graph element... The selectors can be combined together to make powerful queries... Selectors can be joined together (effectively creating a logical OR) with commas... node, edge, or * (group selector) Matches elements based on group (node for nodes, edge for edges, * for all)...

为了仅将样式应用于选定的边，请为选定的边使用选择器。

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'red',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
      .selector('edge:selected')  // ← ← ← ← ←
        .css({
          'width': 5
      })...

jsFiddle 演示：http://jsfiddle.net/xmojmr/rbuj3o9c/2/

仅增加选定边的宽度 (cytoscape.js)

Increase width of selected edges only (cytoscape.js)

javascript

graph

cytoscape

cytoscape-web

cytoscape.js