sigma.js（キャンバスレンダラー）上の選択したノードにCSSプロパティを追加する方法

Question

ノードをクリックすると、すべての非隣接ノードを透過にする関数を作成しました。今では、同じノードをマウスイベントに応答しないようにし、可視ノードを応答性に保ちたいと思います。 1つのオプションは、透明なノードに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

あなただけのノードを非表示にしたいですか？そうであれば、ノードのhiddenプロパティを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にフラグを設定することを忘れないでください。