title: nvd3.js : no mouseover datapoint effects in a line chart on updating the chart
body: <p>I'm trying to draw a simple line chart using nvd3/d3. Things are fine when the graph loads for the first time. But whenever I load new data and update the graph, the transition that occurs on the datapoints during 'mouseover' is lost. The tooltip is shown though. How to fix this?. </p>
  
  <p>have a look at this <a href="http://jsfiddle.net/lkshminarayanan/af4nK/1/" rel="nofollow">jsFiddle demo</a>.</p>
  
  <p>adding the code :</p>
  
  <pre><code>//js :
  
      var n = 0;
  
  var data = function (start) {
      var line1 = [],
          line2 = [];
  
      for (var i = start; i &lt; start + 50; i++) {
          line1.push({
              x: i,
              y: 2 * i
          });
          line2.push({
              x: i,
              y: 3 * i
          });
      }
  
      return [{
          values: line1,
          key: 'y = 2 * x',
          color: '#ff7f0e'
      }, {
          values: line2,
          key: 'y = 3 * x',
          color: '#2ca02c'
      }];
  }
  
  var drawGraph = function (start) {
      var chart = nv.models.lineChart();
  
      chart.xAxis.axisLabel('Time (ms)')
          .tickFormat(d3.format(',r'));
  
      chart.yAxis.axisLabel('Voltage (v)')
          .tickFormat(d3.format('.02f'));
  
      d3.select('#chart svg')
          .datum(data(start))
          .transition().duration(500)
          .call(chart);
  
      nv.utils.windowResize(chart.update);
  
      return chart;
  }
  
  nv.addGraph(drawGraph(n));
  
  $("button").click(function () {
      n += 50;
      nv.addGraph(drawGraph(n));
  });
  </code></pre>
  
  <p>the html page :</p>
  
  <pre><code>&lt;div id="chart"&gt;
  &lt;svg&gt;&lt;/svg&gt;
  &lt;/div&gt;
  &lt;button&gt;Change Graph&lt;/button&gt;
  </code></pre>