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

Question

我正在使用cytoscape.js并希望在鼠标悬停或点击节点时添加该功能以将样式应用于:

1. 改变邻近节点的风格 - 第1度
2. 淡出未连接的节点

我似乎能够得到邻居,任何想法我如何将风格应用于非邻居？

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

            });

Answer 1

除了 Polosson 的回答，因为我没有大声评论：

api 似乎已经改变，它现在是目标而不是cyTarget（版本 3.2.17）。

此外，您可能需要添加收入者以突出显示所有邻居：

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 2

如果您在鼠标悬停时没有找到突出显示节点子节点的解决方案,那么这是我的尝试并且效果很好:

事件处理程序

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');
});

基本上,如果所有元素不是悬停节点或其直接子节点("outgoers")并且类'semitransp'被添加到它们中,则会过滤所有元素.
然后,类"突出显示"被添加到悬停节点及其所有子节点.

'highlight'和'semitransp'类的样式示例:

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 3

使用设置差异：http://js.cytoscape.org/#collection/building--filtering/eles.difference

cy.elements().difference( dontIncludeTheseEles )