D3 v5 में CSV फ़ाइलों से डेटा लोड करना

D3 v4 में, XMLHttpRequest का उपयोग करके CSV फ़ाइलों से डेटा लोड करना सीधा था। हालाँकि, D3 v5 में वादों की शुरूआत के साथ, प्रक्रिया थोड़ी बदल गई है।

D3 v5 का उपयोग करना

D3 v5 का उपयोग करके CSV फ़ाइल से डेटा लोड करने के लिए, आप फ़ेच() एपीआई का उपयोग कर सकते हैं। यहां बताया गया है कि आप अपना कोड कैसे संशोधित कर सकते हैं:

d3.csv('data/dataset.csv')
    .then(function(data) {
        if (error !== null) {
            alert ("Couldn't load the dataset!");
        } else {
            //do something
        };
    })
    .catch(function(error) {
        //handle error
    })

अंतर को समझना

D3 v4 और D3 v5 के बीच मुख्य अंतर यह है कि वे अतुल्यकालिक अनुरोधों को कैसे संभालते हैं। D3 v4 XmlHttpRequest का उपयोग करता है, जो कोई वादा वापस नहीं करता है। परिणामस्वरूप, आप इसे एक कॉलबैक फ़ंक्शन पास करते हैं जो अनुरोध पूरा होने पर चलता है।

इसके विपरीत, D3 v5 प्रॉमिस एपीआई का उपयोग करता है, जो आपको सफलता और विफलता के मामलों को अलग से संभालने की अनुमति देता है। 'then()' फ़ंक्शन का उपयोग सफलता के मामले को संभालने के लिए किया जाता है, जबकि 'catch()' का उपयोग त्रुटियों को संभालने के लिए किया जाता है।

Example

निम्नलिखित कोड स्निपेट प्रदान करता है D3 v5 का उपयोग करके CSV फ़ाइल से डेटा कैसे लोड करें इसका एक संपूर्ण उदाहरण:

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

प्रॉमिस एपीआई का लाभ उठाकर, डी3 वी5, डी3 वी4 की तुलना में एसिंक्रोनस डेटा लोडिंग को संभालने के लिए अधिक संरचित और लचीला तरीका प्रदान करता है।