Add updating tooltips to a streamgraph

Question

I have a streamgraph and I would like to add tooltips that appear when the mouse hovers over each stream, exactly like this example:

http://archive.stamen.com/mtvmovies-streamgraph/index.html

I have tooltips which do something similar at the moment, but they only display the very first value in each stream so no matter where in the stream I hover my cursor, I only receive the starting value. Also, the tooltip isnt continuous, so when I move my cursor, the tooltip vanishes

Heres the code I am using now.

   var toolTip = vis.selectAll("path")
       .data(data)
       .append("svg:title")
       .text(function(d) {
           return ('Date: ') + formatTime(d.d_date) +
                  (' Money: ') + (d.money) +
                  (' Movie: ') + (d.name)
       });

Would anyone have any suggestions or advice??

Answer 1

I think you're just missing your call to enter().append(). Unless otherwise specified, elements share the data of their parent.

/* Join */
var stream = viz.selectAll("path").data(data);

/* Enter */
stream.enter().append("path").append("title");

/* Exit */
stream.exit().remove();

/* Update */
stream
  .attr("d", function(d) { return d.path; })
.select("title")
  .text(function(d) { 
      return ('Date: ') + formatTime(d.d_date) 
        + (' Money: ') + (d.money) 
        + (' Movie: ') + (d.name);
  });