Adding dynamic tooltips to a streamgraph d3.js

Question

Im working on a streamgraph at the moment, I want to add tooltips to each layer similar to this http://archive.stamen.com/mtvmovies-streamgraph/chart.html

The tooltips I have now dont really work at all. All I get is 'NaN' displayed in the tooltip box.

Any suggestions?? My code is below.

Thanks in advance.

   var customPalette = [
       "#ff7f0e",  "#2ca02c", "#00FFFF", "#d62728", "#9467bd",
      "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
    ];

    var format = d3.time.format("%y");

    //creating margins around the graph
    var margin = {top: 20, right: 30, bottom: 30, left: 200},
        width = 1200 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    //OUTPUT RANGE
    var x = d3.time.scale()
        .range([0, width]);

    //OUTPUT RANGE
    var y = d3.scale.linear()
        .range([height, 0]);

    //assining custom colors to layers
    var colours = d3.scale.ordinal().range(customPalette);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .ticks(d3.time.years);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    //ctreate stack layout
    var stack = d3.layout.stack()
        .offset("wiggle")
        .order("reverse")
        .values(function(d) { return d.values; })
        .x(function(d) { return d.date; })
        .y(function(d) { return d.amount; });

    //creates array of datya elements for stacked bar graph
    var nest = d3.nest()
        .key(function(d) { return d.age; });

    //create area
    var area = d3.svg.area()
        //adds curviture
        .interpolate("monotone")
        .x(function(d) { return x(d.date); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });

    var svg = d3.select("body").append("svg")
        //defines length of x-axis
        .attr("width", width + margin.left + margin.right)
        //defines height of y-axis
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    d3.csv("data6.csv", function(data) {
      data.forEach(function(d) {
        // Convert strings to numbers
        d.date = format.parse(d.date);
        d.amount = +d.amount;
      });

      //returns an array of objects with a key feild (0-20yrs....)
      //and a value array which contains associated records
      var layers = stack(nest.entries(data));

      //.extent() returns min and max values of argument
      x.domain(d3.extent(data, function(d) { return d.date; }));
      //
      y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

      svg.selectAll(".layer")
          .data(layers)
        .enter().append("path")
          .attr("class", "layer")
          .attr("d", function(d) { return area(d.values); })
          .style("fill", function(d, i) { return colours(i); });

      //CURRENT TOOLTIP CODE
      var toolTip = svg.selectAll("path")
                       .append("svg:title")
                   .text(function(d) { return (d.date) + (d.amount) });;


    svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + 0 + ")")
          .call(xAxis);

    svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);

    });

Answer 1

Are you hoping to concatenate the values of d.date and d.close, or are you interested in adding the values and returning the result?

If the latter: I would bet that the types of d.date and d.close are not what you expect. I'd recommend, if you haven't already, putting some debug code in to check the types of those variables. Example:

//CURRENT TOOLTIP CODE
var toolTip = svg.selectAll("path")
   .append("svg:title")
   .text(function(d) { 
     console.log('d.date type:' + typeof d.date + 'd.close type:' + typeof d.close);
     return (d.date) + (d.close);
   }
);

Also, you have an extra semicolon at the end of that statement in your code snippet.

If the former: One or both are of type number and Javascript will try to add them when you use the + operator instead of concatenating them. To return the strings:

.text(function(d) {
  return d.date.toString() + ' ' + d.close.toString();
});