Topology graphing is starting to work.

src/main/resources/web/js/models/topologymodel.js

@@ -40,11 +40,13 @@ window.Topology = Backbone.Model.extend({
                 	self.nodes[l['dst-switch']] = true;
                 });
                 // console.log(self.nodes);
-                self.nodes = _.keys(self.nodes);
+                var nl = _.keys(self.nodes);
+                self.nodes = _.map(nl, function (n) {return {name:n}});
                 // step 2: build array of links in format D3 expects
                 _.each(data, function (l) {
-                	self.links.push({source:self.nodes.indexOf(l['src-switch']),
-                					   target:self.nodes.indexOf(l['dst-switch'])});
+                	self.links.push({source:nl.indexOf(l['src-switch']),
+                					 target:nl.indexOf(l['dst-switch']),
+                					 value:10});
                 });
                 // console.log(self.nodes);
                 // console.log(self.links);

src/main/resources/web/js/views/topology.js

@@ -22,6 +22,7 @@ window.TopologyView = Backbone.View.extend({
 
     render:function (eventName) {
         $(this.el).html(this.template());
+        // code from D3 force-directed graph example since there's no other docs
         var width = 940,
         	height = 940; // might as well make it square
         var color = d3.scale.category20();
@@ -33,8 +34,27 @@ window.TopologyView = Backbone.View.extend({
             .attr("width", width)
             .attr("height", height);
         if(this.model.nodes) {
-        	// FIXME no clue why this doesn't work
+        	// FIXME links are invisible
         	force.nodes(this.model.nodes).links(this.model.links).start();
+        	var link = svg.selectAll("line.link").data(this.model.links).enter()
+        			      .append("line").attr("class", "link")
+        			      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
+        	var node = svg.selectAll("circle.node").data(this.model.nodes)
+        	              .enter().append("circle")
+        	              .attr("class", "node")
+        	              .attr("r", 5)
+        	              .style("fill", function(d) { return color(d.group); })
+        	              .call(force.drag);
+        	node.append("title").text(function(d) { return d.name; });
+        	force.on("tick", function() {
+        		link.attr("x1", function(d) { return d.source.x; })
+        		    .attr("y1", function(d) { return d.source.y; })
+        		    .attr("x2", function(d) { return d.target.x; })
+        		    .attr("y2", function(d) { return d.target.y; });
+
+        		node.attr("cx", function(d) { return d.x; })
+        		    .attr("cy", function(d) { return d.y; });
+        	});
         }
         return this;
     }