Added code to adjust node rectangle size based on text label size, plus a little more for the icon.

@@ -31,8 +31,9 @@
                 }
             },
             labels: {
-                padLR: 3,
-                padTB: 2,
+                imgPad: 22,
+                padLR: 8,
+                padTB: 6,
                 marginLR: 3,
                 marginTB: 2
             },
@@ -252,7 +253,7 @@
             }
         });
 
-        // TODO: add drag, mouseover, mouseout behaviors
+
         network.node = network.svg.selectAll('.node')
             .data(network.force.nodes(), function(d) {return d.id})
             .enter().append('g')
@@ -284,29 +285,24 @@
                 }
             });
 
-        // TODO: augment stroke and fill functions
         network.nodeRect = network.node.append('rect')
-            // TODO: css for node rects
             .attr('rx', 5)
             .attr('ry', 5)
-//            .attr('stroke', function(d) { return '#000'})
-//            .attr('fill', function(d) { return '#ddf'})
             .attr('width', 126)
-            .attr('height', 24);
+            .attr('height', 40);
 
         network.node.each(function(d) {
             var node = d3.select(this),
                 rect = node.select('rect'),
                 img = node.append('svg:image')
-                    .attr('x', -9)
-                    .attr('y', -12)
+                    .attr('x', -16)
+                    .attr('y', -16)
                     .attr('width', 32)
                     .attr('height', 32)
                     .attr('xlink:href', iconUrl(d)),
                 text = node.append('text')
                     .text(d.id)
-                    .attr('dx', '1.0em')
-                    .attr('dy', '1.8em'),
+                    .attr('dy', '1.1em'),
                 dummy;
 
         });
@@ -321,6 +317,43 @@
                     first = true;
 
                 // NOTE: probably unnecessary code if we only have one line.
+                text.each(function() {
+                    var box = this.getBBox();
+                    if (first || box.x < bounds.x1) {
+                        bounds.x1 = box.x;
+                    }
+                    if (first || box.y < bounds.y1) {
+                        bounds.y1 = box.y;
+                    }
+                    if (first || box.x + box.width < bounds.x2) {
+                        bounds.x2 = box.x + box.width;
+                    }
+                    if (first || box.y + box.height < bounds.y2) {
+                        bounds.y2 = box.y + box.height;
+                    }
+                    first = false;
+                }).attr('text-anchor', 'middle');
+
+                var lab = config.labels,
+                    oldWidth = bounds.x2 - bounds.x1;
+
+                bounds.x1 -= oldWidth / 2;
+                bounds.x2 -= oldWidth / 2;
+
+                bounds.x1 -= (lab.padLR + lab.imgPad);
+                bounds.y1 -= lab.padTB;
+                bounds.x2 += lab.padLR;
+                bounds.y2 += lab.padTB;
+
+                node.select('rect')
+                    .attr('x', bounds.x1)
+                    .attr('y', bounds.y1)
+                    .attr('width', bounds.x2 - bounds.x1)
+                    .attr('height', bounds.y2 - bounds.y1);
+
+                node.select('image')
+                    .attr('x', bounds.x1);
+                // ====
             });
 
             network.numTicks = 0;

@@ -7,50 +7,50 @@
     },
     "nodes": [
         {
-            "id": "switch-1",
+            "id": "sample1",
             "type": "opt",
             "status": "good"
         },
         {
-            "id": "switch-2",
+            "id": "00:00:00:00:00:00:00:02",
             "type": "opt",
             "status": "good"
         },
         {
-            "id": "switch-3",
+            "id": "00:00:00:00:00:00:00:03",
             "type": "opt",
             "status": "good"
         },
         {
-            "id": "switch-4",
+            "id": "00:00:00:00:00:00:00:04",
             "type": "opt",
             "status": "good"
         },
         {
-            "id": "switch-11",
+            "id": "00:00:00:00:00:00:00:11",
             "type": "pkt",
             "status": "good"
         },
         {
-            "id": "switch-12",
+            "id": "00:00:00:00:00:00:00:12",
             "type": "pkt",
             "status": "good"
         },
         {
-            "id": "switch-13",
+            "id": "00:00:00:00:00:00:00:13",
             "type": "pkt",
             "status": "good"
         }
     ],
     "links": [
-        { "src": "switch-1", "dst": "switch-2" },
-        { "src": "switch-1", "dst": "switch-3" },
-        { "src": "switch-1", "dst": "switch-4" },
-        { "src": "switch-2", "dst": "switch-3" },
-        { "src": "switch-2", "dst": "switch-4" },
-        { "src": "switch-3", "dst": "switch-4" },
-        { "src": "switch-13", "dst": "switch-3" },
-        { "src": "switch-12", "dst": "switch-2" },
-        { "src": "switch-11", "dst": "switch-1" }
+        { "src": "sample1", "dst": "00:00:00:00:00:00:00:02" },
+        { "src": "sample1", "dst": "00:00:00:00:00:00:00:03" },
+        { "src": "sample1", "dst": "00:00:00:00:00:00:00:04" },
+        { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:03" },
+        { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:04" },
+        { "src": "00:00:00:00:00:00:00:03", "dst": "00:00:00:00:00:00:00:04" },
+        { "src": "00:00:00:00:00:00:00:13", "dst": "00:00:00:00:00:00:00:03" },
+        { "src": "00:00:00:00:00:00:00:12", "dst": "00:00:00:00:00:00:00:02" },
+        { "src": "00:00:00:00:00:00:00:11", "dst": "sample1" }
     ]
 }

@@ -85,12 +85,14 @@ svg .node.selected rect {
 
 svg .link.inactive,
 svg .node.inactive rect,
-svg .node.inactive text {
+svg .node.inactive text,
+svg .node.inactive image {
     opacity: .2;
 }
 
 svg .node.inactive.selected rect,
-svg .node.inactive.selected text {
+svg .node.inactive.selected text,
+svg .node.inactive.selected image {
     opacity: .6;
 }