implement simple d3 based netmap

Netdisco/views/ajax/device/netmap.tt

@@ -0,0 +1,65 @@
+<script>
+
+var diameter = window.innerHeight;
+
+var tree = d3.layout.tree()
+    .size([360, diameter])
+    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
+
+var diagonal = d3.svg.diagonal.radial()
+    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
+
+var svg = d3.select("#netmap_pane").append("svg")
+    .attr("width", window.innerWidth - 50)
+    .attr("height", diameter - 100)
+    .attr("pointer-events", "all")
+  .append('g')
+    .call(d3.behavior.zoom().on("zoom", redraw))
+  .append("g")
+    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
+
+// FIXME there must be a way to discover the radial tree's size?
+svg.append('rect')
+    .attr("x", (0 - (diameter * 2)))
+    .attr('width', "400%")
+    .attr("y", (0 - (diameter * 2)))
+    .attr('height', "400%")
+    .attr('fill', 'white');
+
+function redraw() {
+  // console.log("here", d3.event.translate, d3.event.scale);
+  svg.attr("transform",
+    "translate(" + d3.event.translate + ")"
+    + "scale(" + d3.event.scale + ")"
+    + "translate(" + (diameter / 2) + "," + (diameter / 2) + ")");
+}
+
+d3.json("[% uri_for('/ajax/data/device/netmap') %]?&q=[% params.q | uri %]", function(error, root) {
+  var nodes = tree.nodes(root),
+      links = tree.links(nodes);
+
+  var link = svg.selectAll(".link")
+      .data(links)
+    .enter().append("path")
+      .attr("class", "link")
+      .attr("d", diagonal);
+
+  var node = svg.selectAll(".node")
+      .data(nodes)
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
+
+  node.append("circle")
+      .attr("r", 4.5);
+
+  node.append("text")
+      .attr("dy", ".31em")
+      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
+      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
+      .text(function(d) { return d.name; });
+});
+
+d3.select(self.frameElement).style("height", diameter - 100 + "px");
+
+</script>