Javascript 使用Cytoscape JS和x27突出显示边缘；行不通

我想在单击节点后高亮显示输出边。现在，我有这样的代码：

style: cytoscape.stylesheet()
  .selector('node')
    .css({
      'content': 'data(id)',
      'background-color': '#4286f4'
    })
  .selector('edge.highlighted')
    .css({
      'line-color': 'black',
      'target-arrow-color': '#b830f7'
    })
  .selector('edge')
    .css({
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle',
      'width': 4,
      'line-color': '#4286f4',
      'target-arrow-color': '#4286f4'
    }),
 //else parameters
 });
cy.on('click', function(e){
    var edges = cy.edges();
    edges.removeClass('highlighted');
});
cy.on('click', 'node', function(e){
    var id = e.target.id();
    var outgoing = cy.edges("[source='" + id + "']")
    outgoing.addClass('highlighted');
});

当“边”选择器未设置线条颜色时，它可以正常工作，但如果我为边设置了一些颜色，则在单击节点后，新颜色将不适用

style: cytoscape.stylesheet()
  .selector('node')
    .css({
      'content': 'data(id)',
      'background-color': '#4286f4'
    })
  .selector('edge.highlighted')
    .css({
      'line-color': 'black',
      'target-arrow-color': '#b830f7'
    })
  .selector('edge')
    .css({
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle',
      'width': 4,
      'line-color': '#4286f4',
      'target-arrow-color': '#4286f4'
    }),
});

cy.on('click', function(e){
   if (e.target === cy || e.target.group() == "edges")  {
      cy.edges().removeClass('highlighted');  
   }
   else { 
      cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
   }
});

我认为这应该可以很好地工作，您同时调用了两个click方法，这可能导致了一些问题，请让我知道这是否修复了它：）

如果希望有两个单独的单击事件，可以编写以下内容：

cy.on('click', function(e){
   if (e.target === cy || e.target.group() == "edges")  {
      cy.edges().removeClass('highlighted');
});

cy.on('click', 'node', function(e){
   cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
});

---

可以为线条颜色添加特殊选择器：

.selector('edge.lines')
    .css({
      'line-color': '#4286f4',
      'target-arrow-color': '#4286f4'
    })

---

然后使用cy.edges（）.classes（'highlighted'）将edges类替换为highlighted类，或者使用cy.edges（）.classes（'lines'）将类设置为'lines'

我在工作中为代码添加了一些关键内容，为我解决了这个问题：

style: cytoscape.stylesheet()
  .selector('node')
    .css({
      'content': 'data(id)',
      'background-color': '#4286f4'
    })
  .selector('edge.highlighted')
    .css({
      'line-color': 'black',
      'target-arrow-color': '#b830f7'
    })
  .selector('edge')
    .css({
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle',
      'width': 4,
      'line-color': '#4286f4',
      'target-arrow-color': '#4286f4'
    }),
});

cy.unbind('click');
cy.bind('click', function(e){
   if (e.target === cy || e.target.group() == "edges")  {
      cy.edges().removeClass('highlighted');  
   }
   else { 
      cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
   }
});

cy.on（）是绑定操作的同义词，因此这可能会导致许多错误，即使问题仍然存在，也必须取消绑定以前的绑定，否则代码将执行两次或更多次

以下是cytoscape的整个初始化：

// Initialize cytoscape
cy = window.cy = cytoscape({
    container: $('.cy'),
    boxSelectionEnabled: false,
    autounselectify: true,
    layout: {
       name: 'grid'
    },
    style: [
       {
         selector: 'node',
         style: {
           'shape': 'data(faveShape)',
           'content': 'data(DisplayName)',
           'height': 'data(faveHeight)',
           'width': 'data(faveWidth)',
           'background-color': 'data(faveColor)',
           'line-color': '#a8eae5',
           'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial,Verdana',
           'font-size': '15px',
         }  
       },  
       {   
         selector: 'edge',
         style: {
           'label': 'data(myLabel)',
           'curve-style': 'bezier',
           'width': 5,
           'opacity': 0.5,
           'line-color': '#a8eae5',
           'font-size': '12px',
           'target-arrow-shape': 'triangle',
           'target-arrow-color': '#a8eae5'
         } 
       },  
       {   
         selector: '.autorotate',
         style: {
           'edge-text-rotation': 'autorotate'
         } 
       },  
       {   
         selector: ".center-center",
         style: {
           "text-valign": "center",
           "text-halign": "center"
         } 
       },  
       {   
         selector: 'edge.highlighted',
         style: {
           'line-color': '#2a6cd6',
           'target-arrow-color': '#2a6cd6',
           'opacity': 0.7,
         } 
       },  
       {    
         selector: 'edge.deactivate',
         style: {
           'opacity': 0.1,
         } 
       },  
       {   
         selector: 'node.deactivated',
         style: {
           'opacity': 0.1,
         }
       }
   ],
 });
 // After some other functions where I select the nodes I want to display I
 // empty the graph and then:

 cy.add(jsonNew);
 layout = cy.elements().layout({
     name: 'concentric'
 }).run();

 cy.fit(cy.elements());
 cy.center();;

 cy.unbind('click');
 cy.unbind('tapstart');
 cy.unbind('tapend');
 cy.bind('click ', 'node', function (evt) {
    onTap(evt);
 });

 cy.bind('tapstart ', 'node', function (evt) {
    cy.edges("[source = '" + evt.target.id()+"']").addClass('highlighted');
    cy.edges("[source !='" + evt.target.id()+"']").addClass('deactivate');
    // Here is a complicated algorithm to get all nodes not connected to the  
    // node which is currently held, I get all these nodes and then make 
    // them almost invisible. When the node is released I set remove the 
    // node.deactivated class from all nodes
 });

 cy.bind('tapend ', 'node', function (evt) {
    cy.edges("[source ='"+evt.target.id()+"']").removeClass('highlighted');
    cy.edges("[source !='"+evt.target.id()+"']").removeClass('deactivate');
 });

---

通过执行此操作，可以高亮显示选定节点和所有传出边，并将节点连接到选定节点

 cy.on('tap', 'node', function(evt) {
      const target: any = evt.target;
      const node = target[0]._private.data;
      console.log( 'tapped ' , node.name);

      cy.elements().difference(target.outgoers()).not(target).addClass('semitransp');
      target.addClass('highlight').outgoers().addClass('highlight');


    });

通过执行以下操作，单击cy（图形外部），可以取消选择所有节点和边

cy.on('click',function(evt){
    //select either edges or nodes to remove the styles
    //var edges = cy.edges();
    //var nodes = cy.nodes()
    // edges.removeClass('semitransp');
    // nodes.removeClass('semitransp');
    //you can select all elements and remove the styles
    cy.elements().removeClass('semitransp');      
})

样式/css详细信息供您参考

{
    selector: 'node.highlight',
    style: {
        'border-color': '#FFF',
        'border-width': '2px'
    }
},
{
    selector: 'node.semitransp',
    style: { 'opacity': '0.5' }
},
{
    selector: 'edge.highlight',
    style: { 'mid-target-arrow-color': '#FFF' }
},
{
    selector: 'edge.semitransp',
    style: { 'opacity': '0.2' }
}

---

试着在Biostart.org上问这个问题：）Cytoscape最初是一个生物信息软件。但它不会在单击空白或边缘后禁用高亮显示。我看到的问题是，第一个cy.on（'click'）会在任何给定的单击时触发，也会在单击节点时触发，因此如果第二个cy.on（）在第一个之前完成，您的边将在选择后立即取消选择。cy调用是异步的，所以你必须记住这一点。不，我也有同样的问题。你是通过这种方式得到了更好的结果还是仍然存在同样的问题？不知道为什么，但wdges仍然没有突出显示。你还有任何其他cy.on（）调用，还是只有这些调用？我在chrome中有完全相同的代码（希望我使用tapstart和tapend，因为我在握住边缘时高亮显示它们，在发布时取消高亮显示它们）。我对这段代码没有一个问题，也许你的代码中有另一个错误？不，我只有这些调用，而且我没有看到其他错误，它与代理类一起工作良好，正如我在下面回答的，你在哪里设置cytoscape的样式，我看到你调用stylesheet（）来设置它，我在cytoscape的初始化时这样做，我想这会更容易。通常，调用是不同的（它们的语法）。我在上面的代码中添加了初始化，我真的在这里寻找救命稻草，但是我看不出您的代码的其余部分有任何错误。。。你能解释一下什么是代理类吗？