Added port numbers to port labels. Still needs fine tuning, but good enough for the demo.

@@ -89,9 +89,9 @@
             marginLR: 3,
             marginLR: 3,
             marginTB: 2,
             marginTB: 2,
             port: {
             port: {
-                gap: 2,
-                width: 12,
-                height: 12
+                gap: 3,
+                width: 18,
+                height: 14
             }
             }
         },
         },
         icons: {
         icons: {
@@ -315,6 +315,7 @@
         portLabelsOn = !portLabelsOn;
         portLabelsOn = !portLabelsOn;
         var portVis = portLabelsOn ? 'visible' : 'hidden';
         var portVis = portLabelsOn ? 'visible' : 'hidden';
         d3.selectAll('.port').style('visibility', portVis);
         d3.selectAll('.port').style('visibility', portVis);
+        d3.selectAll('.portText').style('visibility', portVis);
     }
     }
 
 
     function unpin() {
     function unpin() {
@@ -577,30 +578,46 @@
                 class: 'portLayer'
                 class: 'portLayer'
             });
             });
 
 
-        var portVis = portLabelsOn ? 'visible' : 'hidden';
+        var portVis = portLabelsOn ? 'visible' : 'hidden',
+            pw = config.labels.port.width,
+            ph = config.labels.port.height;
 
 
         network.link.filter('.infra').each(function(d, i) {
         network.link.filter('.infra').each(function(d, i) {
             network.linkSrcPort.append('rect').attr({
             network.linkSrcPort.append('rect').attr({
                 id: 'srcPort-' + d.id,
                 id: 'srcPort-' + d.id,
                 class: 'port',
                 class: 'port',
-                width: 12,
-                height: 12,
+                width: pw,
+                height: ph,
                 x: i * 20,
                 x: i * 20,
                 y: 0
                 y: 0
             })
             })
-            .style('visibility', portVis)
-                .append('text').text(d.srcPort);
+            .style('visibility', portVis);
 
 
             network.linkTgtPort.append('rect').attr({
             network.linkTgtPort.append('rect').attr({
                 id: 'tgtPort-' + d.id,
                 id: 'tgtPort-' + d.id,
                 class: 'port',
                 class: 'port',
-                width: 12,
-                height: 12,
+                width: pw,
+                height: ph,
                 x: i * 20,
                 x: i * 20,
                 y: 20
                 y: 20
             })
             })
             .style('visibility', portVis);
             .style('visibility', portVis);
 
 
+            network.linkSrcPort.append('text').attr({
+                id: 'srcText-' + d.id,
+                class: 'portText',
+                x: i * 20,
+                y:0
+            }).text(d.srcPort)
+                .style('visibility', portVis);
+
+            network.linkTgtPort.append('text').attr({
+                id: 'tgtText-' + d.id,
+                class: 'portText',
+                x: i * 20,
+                y:20
+            }).text(d.tgtPort)
+                .style('visibility', portVis);
         });
         });
 
 
         // ...............................................................
         // ...............................................................
@@ -982,6 +999,15 @@
                 .attr('x', pxt - portHalfW)
                 .attr('x', pxt - portHalfW)
                 .attr('y', pyt - portHalfH);
                 .attr('y', pyt - portHalfH);
 
 
+            // TODO: fit label rect to size of port number.
+            d3.select('#srcText-' + d.id)
+                .attr('x', pxs - 5)
+                .attr('y', pys + 3);
+
+            d3.select('#tgtText-' + d.id)
+                .attr('x', pxt - 5)
+                .attr('y', pyt + 3);
+
         });
         });
 
 
         // position each node by translating the node (group) by x,y
         // position each node by translating the node (group) by x,y

@@ -112,6 +112,14 @@ svg g.portLayer rect.port {
     fill: white;
     fill: white;
 }
 }
 
 
+svg g.portLayer text {
+    stroke: #888;
+    font-size: 8pt;
+    text-align: center;
+    font-weight: normal;
+    pointer-events: none;
+}
+
 svg .node.device rect {
 svg .node.device rect {
     stroke-width: 1.5px;
     stroke-width: 1.5px;