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

Question

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

1. 更改相邻节点的样式 - 一级
2. 淡出未连接的节点

我似乎能够得到邻居，我对如何将样式应用于非邻居有什么想法吗？

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

            });

Answer 1

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

事件处理器:

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

基本上，如果所有元素不是悬停节点或其直接子节点(“outgoers”)并且类“semitransp”被添加到它们，则所有元素都会被过滤。
然后，将类“highlight”添加到悬停节点及其所有子节点。

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