[tor-commits] [atlas/master] Add support for tooltips inside of d3.js graphs

[karsten at torproject.org]

commit cf8fa304c9929d2539af78a0b8f7111ca3bebbcb
Author: Arturo Filastò <art at fuffa.org>
Date:   Wed Mar 13 15:36:04 2013 +0100

    Add support for tooltips inside of d3.js graphs
---
 js/views/details/main.js |   23 +++++++++++++++++++----
 1 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/js/views/details/main.js b/js/views/details/main.js
index 478546d..913bcbe 100644
--- a/js/views/details/main.js
+++ b/js/views/details/main.js
@@ -108,18 +108,33 @@ define([
                 .attr("d", line)
                 .style("fill", "none");
 
+            var datetimeFormat = function(seconds) {
+              var date = new Date(seconds);
+              return d3.time.format("%H:%M %Y-%m-%e")(date);
+            }
+
+            var tooltip = d3.select("body").append("div")
+                          .attr("class", "tooltip")
+                          .style("opacity", 0);
+
             /* Add dots for all line values, and add tooltips. */
             var tooltipFormatter = d3.format(tooltipFormat);
             lineContainers.selectAll("circle")
                 .data(function(d) { return d; })
-                .enter().append("svg:circle")
+                .enter()
+                .append("svg:circle")
                 .attr("class", "dot")
                 .attr("cx", function(d) { return xScale(d[0]); })
                 .attr("cy", function(d) { return yScale(d[1]); })
                 .attr("r", 3)
-                .style("fill", "white")
-                .append("svg:title")
-                .text(function(d) { return tooltipFormatter(d[1]) });
+                .style("fill", "white");
+
+            $("svg circle").tooltip({
+              title: function() {
+                var d = this.__data__;
+                return datetimeFormat(d[0]) + ": " + tooltipFormatter(d[1]);
+              }
+            });
 
             /* Add a legend. */
             var legend = svg.append("g")