nvd3.js chart ajax data redraw - missing hovereffect + former yAxis scale

Question

I am using nvd3 to draw a simple line chart with data receiving via an ajax request. It is working perfectly with the first drawing request but not on redrawing. The chart redraws by calling the same drawing function but with different data + differen max/min values.

When redrawing the chart with new data the "hover circle" does not appear, whereas the tooltip does. Furthermore when clicking on the legend of the chart and force a redraw by that the hover appears again, but the values of the yAxis are changed to these of the first drawn chart.

So far I assume that when redrawing the chart still holds the old max/min values - but only concerning the "hover" effect. The general chart looks fine so far also on redraw - the problem just faces the hover and that's it.

Sounds pretty confusing, but hopefully you will get the point.

Some code:

 d3.json(queryurl, function(data2){
  nv.addGraph(function(jsonData) {
    if(chart){
       chart.remove();
    }
    chart = nv.models.lineChart()
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(d3.scale.category10().range());

    chart.xAxis
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d)) 
        });

    chart.yAxis
        .scale()
        .tickFormat(d3.format(''));

    chart.lines.yDomain([maxmin.max,maxmin.min]);

    d3.select('#chart1 #chartsvg')
      .datum(data2)
      .transition().duration(600)
      .call(chart);

    nv.utils.windowResize(chart.update);

});

});
  return chart;}

Answer 1

Try using .empty() on the svg element before redrawing.