title: D3 Interactive Stream Graph: Data repeating past one month
body: <p>I am working with this stream graph example inspired by this <a href="http://bl.ocks.org/WillTurman/4631136" rel="nofollow">proof-of-concept</a>. My example can be found <a href="http://jsfiddle.net/cconcolato/6YENR/" rel="nofollow">here</a> on jsFiddle. I am at a loss as to why my data is repeating when i move from January to February. </p>
  
  <p>I suspect that the problem is here:</p>
  
  <pre><code>.on("mousemove", function(d, i) {
    mousex = d3.mouse(this);
    mousex = mousex[0];
  
    var invertedx = x.invert(mousex), selected = (d.values);
    invertedx = invertedx.getMonth() + invertedx.getDate();
  
    for (var k = 0; k &lt; selected.length; k++) {
      datearray[k] = selected[k].date
      datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
    }
  
    //console.log(d.values);
  
    mousedate = datearray.indexOf(invertedx);
    pro = d.values[mousedate].value;
  
    var newDate = formatDate(d.values[mousedate].date, "d MMM yyyy");
  
    d3.select(this)
    .classed("hover", true)
    .attr("stroke", strokecolor)
    .attr("stroke-width", "0.5px"), 
    tooltip.html( "&lt;p&gt;"+newDate+" [" + d.key + ": " + pro + "]&lt;/p&gt;" ).style("visibility", "visible");
  
  })
  </code></pre>
  
  <p>So, i have added an onClick event to see what is going on with:</p>
  
  <pre><code>var invertedx = x.invert(mousex), selected = (d.values);
    invertedx = invertedx.getMonth() + invertedx.getDate();
  </code></pre>
  
  <p>Like this:</p>
  
  <pre><code>.on("click", function(d,i){
    mousex = d3.mouse(this);
    mousex = mousex[0];
  
    var invertedx = x.invert(mousex), selected = (d.values);
    invertedx = invertedx.getMonth() + invertedx.getDate();
    var newDate = formatDate(d.values[mousedate].date, "d MMM yyyy");
    pro = d.values[mousedate].value;
  
    console.log(newDate+"; "+pro);
  })
  </code></pre>
  
  <p>And both newDate and pro begin to cycle back to the beginning of Jan when i hove past Feb. It is maddening! What are my eyes skipping over? Any ideas would be helpful.</p>
  
  <p>*Update</p>
  
  <p>The values are repeating because of </p>
  
  <pre><code>mousedate = datearray.indexOf(invertedx);
  console.log(invertedx);
  </code></pre>
  
  <p>The invertedx var is returning the day of the month when clicked. So, even if that day is in Feb it is inconsequential because the day is a treated as a number that is mapped to d.values object here:</p>
  
  <pre><code> pro = d.values[mousedate].value; 
  </code></pre>
  
  <p>Due to var invertedx = x.invert(mousex) in the code, when one moves from month to month it will 'reset' the days only, which then gets mapped to the object resulting in the incorrect values being shown. mousex is mapping to x coordinates on the graph. </p>
  
  <p>Now, how do we get invertedx to contain the day number instead of the date number? For example, let's we have a time x bar for the month of Jan and Feb, which = 59 days (31 + 28, ignore leap year for now). If I click on the region of the graph that corresponds to Feb 28, i want invertedx = 59 instead of 28. How do I do that?</p>
  
  <p>Thank in advance.</p>