如何突出显示 Cytoscape.js 中的相邻节点

Question

I am using cytoscape.js and would like to add the feature on mouseover or tap of a node to apply a style to:

1. change the style of the neighbouring nodes - 1st degree
2. fade out the nodes that are not connected

I seem to be able to get the neighbours, any ideas how I apply a style to non neighbours?

cy.on('tap', 'node', function(e) {
                var node = e.cyTarget;
                var directlyConnected = node.neighborhood();
                directlyConnected.nodes().addClass('connectednodes');

            });

Answer 1

If ever you haven't found the solution to highlight children of a node when mouse hover one, here is my attempt and it works nice:

Event handler:

cy.on('mouseover', 'node', function(e){
    var sel = e.cyTarget;
    cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp');
    sel.addClass('highlight').outgoers().addClass('highlight');
});
cy.on('mouseout', 'node', function(e){
    var sel = e.cyTarget;
    cy.elements().removeClass('semitransp');
    sel.removeClass('highlight').outgoers().removeClass('highlight');
});

Basically, all elements are filtered if they're not the hovered node or its direct children ("outgoers") and the class 'semitransp' is added to them.
Then, the class 'highlight' is added to the hovered node and all its children.

Example of style for 'highlight' and 'semitransp' class:

var cy = cytoscape({
    elements: [ {...} ]
    style: [
        {...},
        {
            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' }
        }
    ]
});

Answer 2

Addition to Polosson's answer since I am not aloud to comment:

The api seems to have changed, it's target instead of cyTarget now (Verison 3.2.17).

Also, you might have to add the incomers to highlight all neighbours:

cy.on('mouseover', 'node', function(e) {
    var sel = e.target;
    cy.elements()
        .difference(sel.outgoers()
            .union(sel.incomers()))
        .not(sel)
        .addClass('semitransp');
    sel.addClass('highlight')
        .outgoers()
        .union(sel.incomers())
        .addClass('highlight');
});
cy.on('mouseout', 'node', function(e) {
    var sel = e.target;
    cy.elements()
        .removeClass('semitransp');
    sel.removeClass('highlight')
        .outgoers()
        .union(sel.incomers())
        .removeClass('highlight');
});

Answer 3

使用集合差异： http ： //js.cytoscape.org/#collection/building--filtering/eles.difference

cy.elements().difference( dontIncludeTheseEles )

Answer 4

This code implements the click functionality instead of hover to highlight the node. It´s an extension of Polosson answer.

 var previous_node; var previous_sel; cy.on("click","node",(e)=> { var sel = e.target; var id = e.target.id(); if ((id.= previous_node) && (previous_node.= undefined ) && (previous_sel;= undefined)) { cy.elements().removeClass("semitransp"). previous_sel.removeClass("highlight").outgoers();union(previous_sel.incomers()).removeClass("highlight"). cy.elements().difference(sel.outgoers().union(sel;incomers())).not(sel).addClass("semitransp"). sel.addClass("highlight").outgoers();union(sel;incomers());addClass("highlight"). previous_sel = sel. previous_node = id. } else { cy.elements().difference(sel.outgoers().union(sel;incomers())).not(sel).addClass("semitransp"). sel.addClass("highlight").outgoers();union(sel;incomers());addClass("highlight"); previous_sel = sel; previous_node = id; } })