click-highlight nodes

1 files changed, 36 insertions, 8 deletions

diff --git a/code/weightvis.js b/code/weightvis.js
index 7b4b5ef..3512373 100644
--- a/code/weightvis.js
+++ b/code/weightvis.js
@@ -21,7 +21,8 @@ var
     linkColor = primaryColor[0],
     linkHighlightColor = primaryColor[1],
     nodeColor = primaryColor[1],
-    nodeHighlightColor = accentColor
+    nodeHighlightColor = primaryColor[2],
+    nodeSelectionColor = accentColor
 ;
 
 
@@ -53,6 +54,7 @@ var Network = (function() {
             for (node=0; node<this.layout.net[layer].size; node++) {
                 this.nodes.push({
                     id: layer.toString() + "_" + node.toString(),
+                    layer: layer,
                     fixed: true
                 });
             }
@@ -332,25 +334,51 @@ var Visualizer = (function() {
                 d3.select(this).style("stroke", linkHighlightColor); 
             })
             .on("mouseout", function(d) {
-                d3.select("#node-" + d.source.id).style("fill", nodeColor);
-                d3.select("#node-" + d.target.id).style("fill", nodeColor);
-                d3.select(this).style("stroke", linkColor);
+                var src = d3.select("#node-" + d.source.id);
+                if (src.attr("data-highlight") != "true") src.style("fill", nodeColor);
+                var tar = d3.select("#node-" + d.target.id);
+                if (tar.attr("data-highlight") != "true") tar.style("fill", nodeColor);
+                var me = d3.select(this);
+                if (me.attr("data-highlight") != "true") me.style("stroke", linkColor);
             });
         var node = this.svg.selectAll(".node")
             .data(this.network.nodes)
             .enter().append("circle")
-            .attr("class", "node")
+            .attr("class", function(d) { return "node layer-" + d.layer; })
             .attr("id", function(d) { return "node-" + d.id; })
             .style("fill", nodeColor)
+            .style("stroke-width", 0)
+            .style("stroke", nodeSelectionColor)
             .on("mouseover", function(d) {
                 d3.selectAll(".source-" + d.id).style("stroke", linkHighlightColor);
                 d3.selectAll(".target-" + d.id).style("stroke", linkHighlightColor);
                 d3.select(this).style("fill", nodeHighlightColor);
             })
             .on("mouseout", function(d) {
-                d3.selectAll(".source-" + d.id).style("stroke", linkColor);
-                d3.selectAll(".target-" + d.id).style("stroke", linkColor);
-                d3.select(this).style("fill", nodeColor);
+                d3.selectAll(".source-" + d.id)[0].forEach(function (el) {
+                    var src = d3.select(el);
+                    if (src.attr("data-highlight") != "true") src.style("stroke", linkColor);
+                });
+                d3.selectAll(".target-" + d.id)[0].forEach(function (el) {
+                    var tar = d3.select(el);
+                    if (tar.attr("data-highlight") != "true") tar.style("stroke", linkColor);
+                });
+                var me = d3.select(this);
+                if (me.attr("data-highlight") != "true") me.style("fill", nodeColor);
+            })
+            .on("click", function(d) {
+                var me = d3.select(this);
+                if (me.attr("data-highlight") == "true") {
+                    d3.selectAll(".source-" + d.id).attr("data-highlight", "false");
+                    //d3.selectAll(".target-" + d.id).attr("data-highlight", "false");
+                    me.attr("data-highlight", "false")
+                      .style("stroke-width", 0);
+                } else {
+                    d3.selectAll(".source-" + d.id).attr("data-highlight", "true");
+                    //d3.selectAll(".target-" + d.id).attr("data-highlight", "true");
+                    me.attr("data-highlight", "true")
+                      .style("stroke-width", d.r / 2);
+                }
             });
 
         reposition();