sigma.js (캔버스 렌더러)에서 선택된 노드에 CSS 속성을 추가하는 방법

Question

노드를 클릭하면 모든 비 인접 노드를 투명하게 만드는 기능을 만들었습니다. 이제는 동일한 노드를 마우스 이벤트에 응답하지 않고 표시 노드를 응답 성있게 유지하려고합니다. 투명 노드에 CSS 속성 pointer-events:none을 할당하는 옵션이 있습니다. 시그마로 할 수 있을까요?

* 이렇게하려면 불투명도 0의 rgba 색상을 지정합니다. 따라서 WebGL은 투명도를 지원하지 않으므로 캔버스 렌더러를 사용해야합니다.

내 코드 :

function highlight() { 

var s = sigma.instances()[0]; 
var nodes = s.graph.nodes(); 
var edges = s.graph.edges(); 
var maxCollab = d3.max(edges, function(d) { return d.collaborations; }); 

// We first need to save the original colors of our 
// nodes and edges, like this: 
nodes.forEach(function(n) { 
    n.originalColor = n.color; 
    }); 
edges.forEach(function(e) { 
    e.originalColor = e.color; 
    }); 

// When a node is clicked, we check for each node 
// if it is a neighbor of the clicked one. If not, 
// we set its color as grey, and else, it takes its 
// original color. 
// We do the same for the edges, and we only keep 
// edges that have both extremities colored. 
s.bind('clickNode', function(e) { 
    var nodeId = e.data.node.id, 
     toKeep = s.graph.neighbors(nodeId); 
    toKeep[nodeId] = e.data.node; 

    nodes.forEach(function(n) { 
     if (toKeep[n.id]) 
     n.color = n.originalColor; 
     else 
     n.color = 'rgba(0,0,0,0)'; 
    }); 

    edges.forEach(function(e) { 
     if (toKeep[e.source] && toKeep[e.target]) { 
     e.color = e.originalColor; 
    } 
     else 
     e.color = 'rgba(0,0,0,0)'; 
    }); 

    // Since the data has been modified, we need to 
    // call the refresh method to make the colors 
    // update effective. 
    s.refresh(); 
}); 

// When the stage is clicked, we just color each 
// node and edge with its original color. 
s.bind('clickStage', function(e) { 
    nodes.forEach(function(n) { 
     n.color = n.originalColor; 
    }); 

    edges.forEach(function(e) { 
     e.color = e.originalColor; 
    }); 
    s.refresh(); 
}); 
} 

Answer 1

그냥 노드를 숨기 하시겠습니까? 그렇다면 노드의 숨김 속성을 true로 설정할 수 있습니다. 이런 식으로 그들은 더 이상 보이지 않을 것이고 시그마는 그들에게 어떤 사건도 일으키지 않을 것입니다.

Answer 2

clickNode 이벤트에 응답하지 않는 노드에 플래그를 추가하기 만하면됩니다.

// excerpt from `clickNode` handler 
nodes.forEach(function(n) { 
    if (toKeep[n.id]) { 
    n.color = n.originalColor; 
    n.clickable = false; // <-- add this 
    } else { 
    n.color = 'rgba(0,0,0,0)'; 
    } 
});  

그때에만 clickNode 핸들러의 내용이 해당 노드에 적용 할 수 있습니다.

// `clickNode` handler 
s.bind('clickNode', function(e) { 
    if (e.data.node.clickable) { 
     // business as usual 
    } 
}); 

은 clickStage 핸들러에서 true에 플래그를 설정하는 것을 잊지 마십시오.