nvd3.js चार्ट AJAX डेटा redraw - गायब होवेफ्रैक्ट + पूर्व yAxis पैमाने

Question

मैं AJAX अनुरोध के माध्यम से प्राप्त डेटा के साथ एक साधारण रेखा चार्ट खींचने के लिए nvd3 का उपयोग कर रहा हूं। यह पहले ड्राइंग अनुरोध के साथ पूरी तरह से काम कर रहा है लेकिन पुनर्विचार पर नहीं। चार्ट एक ही ड्राइंग फ़ंक्शन को कॉल करके फिर से चलाता है लेकिन अलग-अलग डेटा + differen max/min मानों के साथ।

नए डेटा के साथ चार्ट को फिर से खींचा जाने पर "होवर सर्कल" दिखाई नहीं देता है, जबकि टूलटिप करता है। इसके अलावा जब चार्ट की किंवदंती पर क्लिक करते हैं और उस पर एक रेड्रो बल डालते हैं तो होवर फिर से दिखाई देता है, लेकिन yAxis के मान पहले खींचे गए चार्ट के इन्हें बदल दिए जाते हैं।

अब तक मुझे लगता है कि चार्ट को फिर से निकालने पर पुराने अधिकतम/न्यूनतम मान होते हैं - लेकिन केवल "होवर" प्रभाव से संबंधित होते हैं। सामान्य चार्ट अभी तक रेड्रो पर ठीक दिखता है - समस्या सिर्फ होवर का सामना करती है और यही वह है।

बहुत भ्रमित लगता है, लेकिन उम्मीद है कि आपको बिंदु मिलेगा।

कुछ कोड:

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

मैं केवल अभी NVD3 और डी 3 अपने आप के साथ शुरू कर दिया है, फिर भी एक ऐसी ही बात कर रहा हूं। मेरे लिए क्या काम किया गया है चार्ट निर्माण फ़ंक्शन को चार्ट निर्माण फ़ंक्शन से अलग करना है। मैं हालांकि नीचे चेतावनी ...

ध्यान दें करो है ग्राफ़ बनाने के लिए निम्नलिखित: इसे अद्यतन

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

और निम्न कार्य करने के लिए:

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

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

मैं अगर पता नहीं है यह अनुशंसित समाधान है क्योंकि मैं अभी भी "काम करता है जब तक यह हैक" मंच पर है। इसके साथ, चार्ट के सभी कार्य redrawGraph() (अक्ष रेड्रा और टूलटिप्स सहित) के आवेदक के बाद काम करते हैं।

चेतावनी: इस समय-समय पर गलत अनुमान लगाया में परिणाम लगता है पुन: गणना पर टिक्स:

Answer 2

redrawing से पहले svg तत्व पर .empty() का उपयोग करें।