nvd3.js chart ajax data redraw - brakujące hovereffect + dawna skala yAxis

Question

Używam nvd3 do narysowania prostego wykresu liniowego z otrzymywaniem danych za pośrednictwem żądania ajax. Działa idealnie z pierwszym żądaniem rysowania, ale nie przy ponownym rysowaniu. Wykres jest przerysowywany przez wywołanie tej samej funkcji rysowania, ale z innymi danymi + różnicami wartości max/min.

Podczas przerysowywania wykresu z nowymi danymi "kółko najechania" nie pojawia się, a etykieta narzędzia ma. Ponadto po kliknięciu na legendę wykresu i wymuszeniu ponownego rysowania, wskaźnik pojawi się ponownie, ale wartości yAxis zostaną zmienione na wartości z pierwszego narysowanego wykresu.

Do tej pory zakładam, że przy odświeżaniu wykresu nadal zachowywane są stare wartości max/min - ale tylko w odniesieniu do efektu "hover". Ogólna tabela wygląda dobrze do tej pory, również w przypadku przerysowywania - problem po prostu stoi na zawisie i to wszystko.

Brzmi dość myląco, ale mam nadzieję, że zrozumiesz.

Niektóre kodu:

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

Mam dopiero rozpoczął NVD3 i D3 siebie, jednak robię coś podobnego. Dla mnie działało oddzielenie funkcji aktualizacji danych od funkcji tworzenia wykresów. Należy pamiętać, iż zastrzeżenie poniżej ...

Mam następujący do tworzenia wykresu:

initGraph = function(url) { 
    d3.json(url, function(data) { 
    nv.addGraph(function() { 
     chart = nv.models.multiBarChart(); 

     d3.select('#chart svg').datum(data).transition().duration(500).call(chart); 
     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 
    }); 
}; 

I Poniższa funkcja go zaktualizować:

redrawGraph = function(url) { 
    d3.json(url, function(data) { 

    d3.select('#chart svg').datum(data).transition().duration(500).call(chart); 
    nv.utils.windowResize(chart.update); 
    }); 
}; 

ja nie wiem, czy jest to zalecane rozwiązanie, ponieważ wciąż jestem na etapie "włamywanie się, dopóki to działa". Dzięki temu wszystkie funkcje wykresu działają po wywołaniu redrawGraph() (w tym odświeżanie osi i etykietki narzędzi).

Zastrzeżenie: wydaje się to niekiedy skutkować przeliczył kleszczy na przeliczenia:

Answer 2

Spróbuj użyć .empty() na elemencie svg przed przerysowywania.