nvd3.js chart ajax data redraw - fehlende hovereffect + ehemalige yAxis skalieren

Question

Ich benutze nvd3 um ein einfaches Liniendiagramm mit Datenempfang über eine Ajax Anfrage zu zeichnen. Es funktioniert perfekt mit der ersten Zeichnungsanforderung, aber nicht mit dem Neuzeichnen. Das Diagramm wird neu gezeichnet, indem die gleiche Zeichnungsfunktion aufgerufen wird, jedoch mit unterschiedlichen Daten und unterschiedlichen Max/Min-Werten.

Beim Neuzeichnen des Diagramms mit neuen Daten wird der "Hover-Kreis" nicht angezeigt, während der Tooltip dies tut. Wenn Sie auf die Legende des Diagramms klicken und ein Neuzeichnen erzwingen, wird der Hover erneut angezeigt, aber die Werte von yAxis werden in die Werte des ersten gezeichneten Diagramms geändert.

Bisher gehe ich davon aus, dass beim Neuzeichnen des Diagramms immer noch die alten Max/Min-Werte gelten - allerdings nur bezüglich des "Hover" -Effekts. Das generelle Diagramm sieht bis jetzt auch beim Neuzeichnen gut aus - das Problem steht nur dem Schwebeflug gegenüber und das war's.

Klingt ziemlich verwirrend, aber hoffentlich werden Sie den Punkt bekommen.

Einige 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

Ich habe nur mit NVD3 und D3 mich gerade erst begonnen, aber eine ähnliche Sache tun. Was für mich funktionierte, ist die Datenaktualisierungsfunktion mit der Diagrammerstellungsfunktion zu trennen. beachten Sie die Einschränkung unten obwohl ...

Ich habe folgendes um die Grafik zu erstellen:

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; 
    }); 
    }); 
}; 

Und die folgende Funktion zu aktualisieren:

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

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

Ich weiß nicht, ob Dies ist die empfohlene Lösung, da ich immer noch im Stadium "hack to it works" bin. Damit funktionieren alle Funktionen des Plans nach dem Aufruf von redrawGraph() (einschließlich Achsen-Redraw und Tooltips).

Caveat: dies scheint gelegentlich in verkalkuliert führen Zecken auf Neuberechnung:

Answer 2

Versuchen .empty() auf dem SVG-Elemente verwenden, bevor neu erstellt.