Adds opacity instead of hidding nodes when one of them is selected

parent fb06a711
This diff is collapsed.
......@@ -6,41 +6,29 @@ function colorScale(nbColours){
for (r=0; r<tmp; r++){
red = Math.floor(r*255/tmp);
red = red.toString(16);
red = (red == "0" ? "00" : red);
tab.push("#"+red+"ff00");
tab.push("rgba(" + red + ",255,0,1)");
};
for (g=tmp; g>0; g--){
green = Math.floor(g*255/tmp);
green = green.toString(16);
green = (green == "0" ? "00" : green);
tab.push("#ff"+green+"00");
tab.push("rgba(255," + green + ",0,1)");
};
for (b=0; b<tmp; b++){
blue = Math.floor(b*255/tmp);
blue = blue.toString(16);
blue = (blue == "0" ? "00" : blue);
tab.push("#ff00"+blue);
tab.push("rgba(255,0," + blue + ",1)");
};
for (r=tmp; r>0; r--){
red = Math.floor(r*255/tmp);
red = red.toString(16);
red = (red == "0" ? "00" : red);
tab.push("#"+red+"00ff");
tab.push("rgba(" + red + ",0,255,1)");
};
for (g=0; g<tmp; g++){
green = Math.floor(g*255/tmp);
green = green.toString(16);
green = (green == "0" ? "00" : green);
tab.push("#00"+green+"ff");
tab.push("rgba(0," + green + ",255,1)");
};
for (b=tmp; b>0; b--){
blue = Math.floor(b*255/tmp);
blue = blue.toString(16);
blue = (blue == "0" ? "00" : blue);
tab.push("#00ff"+blue);
tab.push("rgba(0,255," + blue + ",1)");
};
tab.push("#00ff00");
//tab.push("rgba(0,255,0)");
return tab;
};
......
......@@ -5,14 +5,14 @@ function displayGraph(s){
selectedNode = "",
cam = s.cameras.cam1,
louvainInstance,
colors = ["#00ff00"],
colors = [],
cesium = 'https://g1.duniter.fr' + '/#/app/wot/';
// We place the nodes around a circle in order to make the force atlas efficient
s.graph.nodes().forEach(function(node, i, a) {
var tabnode = [node.label, node.url];
node.type = 'border';
node.borderWidth = 0.5;
node.borderWidth = 0.8;
node.x = Math.cos(Math.PI * 2 * i / a.length);
node.y = Math.sin(Math.PI * 2 * i / a.length);
maxDegree = Math.max(maxDegree, s.graph.degree(node.id));
......@@ -99,15 +99,62 @@ function displayGraph(s){
});
});
// Function to display/hide a node with his neighboors
function toggleDisplayNodeNeighboors(bool, node = ""){
if (bool){
var toKeep = s.graph.neighbors(node.id);
toKeep[node.id] = node;
s.graph.nodes().forEach(function(n) {
var tmpColor = n.color,
composantes = tmpColor.substring(5,tmpColor.lastIndexOf(','));
if (!toKeep[n.id]){
n.color = 'rgba(' + composantes + ',0.1)';
n.borderColor = 'rgba(255,255,255,0.1)';
}else{
n.color = 'rgba(' + composantes + ',1)';
n.borderColor = 'rgba(0,0,0,1)';
}
});
if (louvainInstance){
s.graph.edges().forEach(function(e) {
var tmpColor = s.graph.nodes(e.source).color,
composantes = tmpColor.substring(5,tmpColor.lastIndexOf(','));
if (!((e.source==selectedNode.id) || (e.target==selectedNode.id))){
e.color = 'rgba(' + composantes + ',0.1)';
}else{
e.color = 'rgba(' + composantes + ',1)';
}
});
}else{
s.graph.edges().forEach(function(e) {
var composantes = '20,25,28';
if (!((e.source==selectedNode.id) || (e.target==selectedNode.id))){
e.color = 'rgba(' + composantes + ',0.1)';
}else{
e.color = 'rgba(' + composantes + ',1)';
}
});
}
}else{
s.graph.nodes().forEach(function(n) {
var tmpColor = n.color,
composantes = tmpColor.substring(5,tmpColor.lastIndexOf(','));
n.color = 'rgba(' + composantes + ',1)';
n.borderColor = 'rgba(255,255,255,1)';
});
s.graph.edges().forEach(function(e) {e.color = '';});
}
}
// Functions to isolate a node
function isolateNodeOnClick(e){if (selectedNode.id === e.data.node.id){resetFilters();centerCamera();}else{isolateNode(e.data.node);}}
function isolateNode(node){
resetFilters();
selectedNode = node;
var toKeep = s.graph.neighbors(selectedNode.id);
toKeep[selectedNode.id] = node;
s.graph.nodes().forEach(function(n) {n.hidden = !toKeep[n.id];});
s.graph.edges().forEach(function(e) {e.hidden = !((e.source==selectedNode.id) || (e.target==selectedNode.id));});
toggleDisplayNodeNeighboors(true, node);
focusNode(cam,node);
_.$("avatar").setAttribute("src", node.url);
_.$("nodeInfos").style.display = 'initial';
......@@ -128,6 +175,7 @@ function displayGraph(s){
// Function that resets all filters
function resetFilters(){
var checkboxes = document.getElementsByClassName('community');
toggleDisplayNodeNeighboors(false);
if (checkboxes){
Array.prototype.forEach.call(checkboxes, function(checkboxElem) {
checkboxElem.checked = true;
......@@ -197,7 +245,6 @@ function displayGraph(s){
return '<div class="autocomplete-suggestion" data-val="'+item[0]+'"><img class="w3-circle img-mini" src="'+item[1]+'"> '+item[0].replace(re, "<b>$1</b>")+'</div>';
},
onSelect: function(e, term, item){
console.log(term);
s.graph.nodes().some(function(node){
var isFound = false;
......@@ -231,7 +278,7 @@ function displayGraph(s){
s.bind('clickNode', isolateNodeOnClick);
s.bind('overNode', function(e) {_.$("graph-container").style.cursor = "pointer";});
s.bind('outNode', function(e) {_.$("graph-container").style.cursor = "move";});
_.$('export').onclick = function() {var output = s.toSVG({download: true, filename: 'wot.svg', size: 1000});console.log(output);};
_.$('export').onclick = function() {var output = s.toSVG({download: true, filename: 'wot.svg', size: 1000});};
_.$('displayEdges').onclick = function() {displayEdges(this.checked);};
_.$('displayAvatars').onclick = function() {displayAvatars(this.checked);};
......@@ -256,7 +303,6 @@ function displayGraph(s){
s.graph.nodes().forEach(function(node) {
node.color = colors[node.my_community];
});
s.refresh({skipIndexation: true});
// Reset colors
var p_dom = e.target.parentNode,
......@@ -271,7 +317,7 @@ function displayGraph(s){
_.$('communityInfo').style.display = 'none';
s.settings('edgeColor','default');
s.graph.nodes().forEach(function(node) {
if (node.attributes.referent){node.color="#008000"}else{node.color="#ff0000"};
if (node.attributes.referent){node.color="rgba(0,128,0,1)"}else{node.color="rgba(255,0,0,1)"};
});
s.refresh({skipIndexation: true});
louvainInstance = null;
......
......@@ -22,7 +22,7 @@ var tab_urls = [],
minNodeSize: 5,
maxNodeSize: 30,
edgeColor: "default",
defaultEdgeColor: "#14191C",
defaultEdgeColor: "rgba(20,25,28,1)",
defaultEdgeType: "curvedArrow",
hideEdgesOnMove:true,
drawNodes:false,
......@@ -32,7 +32,7 @@ var tab_urls = [],
labelThreshold: 20,
labelSize: "proportional",
labelSizeRatio: 0.6,
defaultLabelColor: "#fff",
defaultLabelColor: "rgba(255,255,255,1)",
zoomingRatio: 1.5
},
json_url = 'data/wot.json',
......
......@@ -11,8 +11,10 @@
* @param {configurable} settings The settings function.
*/
sigma.canvas.nodes.def = function(node, context, settings) {
var prefix = settings('prefix') || '';
var prefix = settings('prefix') || '',
opac = node.opacity || 1;
console.log(opac);
context.globalAlpha = opac;
context.fillStyle = node.color || settings('defaultNodeColor');
context.beginPath();
context.arc(
......@@ -26,5 +28,6 @@
context.closePath();
context.fill();
context.globalAlpha = 1;
};
})();
......@@ -67,7 +67,7 @@ while (array_key_exists($i,$tab_tmp)){
'x' => 0.0,
'y' => 0.0,
'size' => 0,
'color' => 'rgb(255,0,0)',
'color' => 'rgba(255,0,0,1)',
'attributes' => ['pubkey' => $tab_tmp[$i]['pubkey'],
'degree' => 0,
'referent' => false]
......@@ -90,7 +90,7 @@ $crit_referent = ceil(pow($nb_nodes,1/$stepmax));
foreach ($tab_final['nodes'] as $key => $value) {
$isreferent = ($tab_final['nodes'][$key]['attributes']['inDegree']>=$crit_referent) && ($tab_final['nodes'][$key]['attributes']['outDegree']>=$crit_referent);
$tab_final['nodes'][$key]['attributes']['referent'] = $isreferent;
if ($isreferent){$tab_final['nodes'][$key]['color']='rgb(0,128,0)';}
if ($isreferent){$tab_final['nodes'][$key]['color']='rgba(0,128,0,1)';}
}
// Ecriture du résultat dans un fichier
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment