Question

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

更改相邻节点的样式 - 第1度
淡出未连接的节点

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

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

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

cy.elements().difference( dontIncludeTheseEles )

Answer 3

除了我不大声评论之外，还补充了Polosson的答案：

api似乎已更改，现在是 target ，而不是 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');
});

如何在Cytoscape.js

3 个答案: