Display the focused time in the axis.

connor · Apr 13, 2012 · b1893ba · b1893ba
1 parent 17ee7ff
commit b1893ba
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 7 deletions.
diff --git a/cubism.v0.js b/cubism.v0.js
@@ -771,12 +771,44 @@ var cubism_comparisonPrimaryFormat = d3.format(".2s"),
     cubism_comparisonChangeFormat = d3.format("+.0%");
 cubism_context.prototype.axis = function() {
   var context = this,
-      axis_ = d3.svg.axis().scale(context.scale);
+      scale = context.scale,
+      axis_ = d3.svg.axis().scale(scale),
+      format = context.step() < 6e4 ? cubism_axisFormatSeconds : cubism_axisFormatMinutes;
 
   function axis(selection) {
-    context.on("change.axis-" + ++cubism_id, function() {
-      selection.call(axis_);
+    var id = ++cubism_id,
+        tick;
+
+    var g = selection.append("svg")
+        .attr("width", context.size())
+        .attr("height", Math.max(28, -axis.tickSize()))
+      .append("g")
+        .attr("transform", "translate(0," + (axis_.orient() === "top" ? 27 : 4) + ")")
+        .call(axis_);
+
+    context.on("change.axis-" + id, function() {
+      g.call(axis_);
+      if (!tick) tick = cloneTick();
     });
+
+    context.on("focus.axis-" + id, function(i) {
+      if (tick) {
+        if (i == null) {
+          tick.style("display", "none");
+          g.selectAll("text").style("fill-opacity", null);
+        } else {
+          tick.style("display", null).attr("x", i).text(format(scale.invert(i)));
+          var dx = tick.node().getComputedTextLength() + 6;
+          g.selectAll("text").style("fill-opacity", function(d) { return Math.abs(scale(d) - i) < dx ? 0 : 1; });
+        }
+      }
+    });
+
+    function cloneTick() {
+      return g.select(function() { return this.appendChild(g.select("text").node().cloneNode()); })
+          .style("display", "none")
+          .text(null);
+    }
   }
 
   return d3.rebind(axis, axis_,
@@ -787,6 +819,9 @@ cubism_context.prototype.axis = function() {
       "tickPadding",
       "tickFormat");
 };
+
+var cubism_axisFormatSeconds = d3.time.format("%I:%M:%S %p"),
+    cubism_axisFormatMinutes = d3.time.format("%I:%M %p");
 cubism_context.prototype.rule = function() {
   var context = this;