commit cf8fa304c9929d2539af78a0b8f7111ca3bebbcb Author: Arturo Filastò <art@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")