仅增加选定边的宽度（cytoscape.js） [英] Increase width of selected edges only (cytoscape.js)

问题描述

当我选择几个连接的节点或简单的边时，如何预定义选定边的宽度，而不影响整个网络的其余边或节点的宽度？

当我选择了节点或者边时，我预定义了这个：

  $（'＃ 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 它会将它应用到所有的边和节点。

那么我怎样才能修改边缘宽度，只是选择和离开图的其余部分？

提前致谢！

解决方案

Cytoscape.js→选择器

...选择器的功能类似于DOM元素上的CSS 选择器，但选择器在Cytoscape.js中，而不是在图元素的集合上工作......选择器可以结合在一起，以实现强大的查询...选择器可以加入在一起（有效地创建逻辑OR）与逗号... 节点，边缘或 * （组选择器）匹配基于组的元素（节点为节点， edge 为边，<$ c

为了仅将样式应用于选定的边，使用 （b

  $（'＃cy'）。cytoscape（{
 style：cytoscape.stylesheet（ ）
 .selector（'：selected'）
 .css（{
'back地面颜色'：'黑'，
'线颜色'：'红'，
'目标箭头颜色'：'黑'，
'源箭头颜色' ：'black'
}）
 .selector（'edge：selected'）//←←←←←
 .css（{
'width'：5 
}）... 
  

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

How can I predefine when I select a few nodes that are connected or simply edges, to make the width of the selected edges be bigger, without affecting the rest of edges of the entire network or the node's width?

I predefined this when the nodes or edges are 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
      })...

but there is no 'line-width', so if I put 'width': 5 it will appy it to all the edges and nodes.

So how could I modify the edge width just when selected and leaving the same the rest of the graph?

Thanks in advance!

解决方案

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)...

In order to apply style only to selected edges use selector for selected edges.

$('#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 demo: http://jsfiddle.net/xmojmr/rbuj3o9c/2/

这篇关于仅增加选定边的宽度（cytoscape.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！