d3.js
JSON और CSV के साथ D3 का उपयोग करना

वाक्य - विन्यास

• d3.csv (url [[, पंक्ति], कॉलबैक])
• d3.tsv (url [[, पंक्ति], कॉलबैक])
• d3.html (url [, कॉलबैक])
• d3.json (url [, कॉलबैक])
• d3.text (url [, कॉलबैक])
• d3.xml (url [, कॉलबैक])

CSV फ़ाइलों से डेटा लोड हो रहा है

डेटा प्राप्त करने के कई तरीके हैं जो आप DOM तत्वों से बांधेंगे। सरल आपकी स्क्रिप्ट में एक सरणी के रूप में आपका डेटा है ...

var data = [ ... ];

लेकिन D3.js हमें बाहरी फ़ाइल से डेटा लोड करने की अनुमति देता है। इस उदाहरण में, हम देखेंगे कि CSV फ़ाइल से डेटा को ठीक से कैसे लोड और सौदा किया जाए।

CSV फाइलें अल्पविराम से अलग किए गए मान हैं । इस तरह की फ़ाइल में, प्रत्येक पंक्ति एक डेटा रिकॉर्ड है, प्रत्येक रिकॉर्ड एक या एक से अधिक फ़ील्ड्स से मिलकर बनता है, जो कॉमा द्वारा अलग किया जाता है। यह जानना महत्वपूर्ण है कि हम जिस फ़ंक्शन का उपयोग करने वाले हैं, d3.csv , हेडर के रूप में CSV की पहली पंक्ति का उपयोग करता है, d3.csv वह रेखा जिसमें फ़ील्ड्स के नाम शामिल हैं।

तो, इस CSV पर विचार करें, जिसका नाम "data.csv" है:

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

"Data.csv" लोड करने के लिए, हम फ़ंक्शन d3.csv उपयोग करते हैं। इसे आसान बनाने के लिए, मान लीजिए कि "data.csv" हमारी स्क्रिप्ट की एक ही निर्देशिका में है, और इसका सापेक्ष पथ केवल "data.csv" है। तो, हम लिखते हैं:

d3.csv("data.csv", function(data){
    //code dealing with data here
});

ध्यान दें कि, कॉलबैक में, हमने एक तर्क के रूप में data उपयोग किया। यह डी 3 में एक आम बात है, लेकिन आप किसी अन्य नाम का उपयोग कर सकते हैं।

हमारे CSV के साथ d3.csv क्या करता है? यह CSV को ऑब्जेक्ट की एक सरणी में परिवर्तित करता है। यदि, उदाहरण के लिए, हम अपने डेटा को console.log देते हैं:

d3.csv("data.csv", function(data){
    console.log(data)
});

यह हम देखने जा रहे हैं:

[
    {
        "city": "New York",
        "population": "3400",
        "area": "210"
    },{
        "city": "Melbourne",
        "population": "1200",
        "area": "350"
    },{
        "city": "Tokyo",
        "population": "5200",
        "area": "125"
    },{
        "city": "Paris",
        "population": "800",
        "area": "70"
    }
]

अब हम उस डेटा को हमारे DOM एलिमेंट्स से जोड़ सकते हैं।

ध्यान दें कि, इस उदाहरण में, population और area तार हैं। लेकिन, शायद, आप उनसे संख्या के रूप में निपटना चाहते हैं। आप उन्हें कॉलबैक के अंदर एक फ़ंक्शन में बदल सकते हैं ( forEach रूप में), लेकिन d3.csv आप एक " d3.csv " फ़ंक्शन का उपयोग कर सकते हैं:

d3.csv("data.csv", conversor, function(data){
    //code here
});

function conversor(d){
    d.population = +d.population;
    d.area = +d.area;
    return d;
}

आप d3.tsv उपयोग d3.tsv में भी कर सकते हैं, लेकिन d3.json में नहीं।

नोट: d3.csv एक एसिंक्रोनस फ़ंक्शन है, जिसका अर्थ है कि कोड के तुरंत बाद यह CSV फ़ाइल लोड होने से पहले ही निष्पादित हो जाएगा। तो, कॉलबैक के अंदर अपने data का उपयोग करने के लिए विशेष ध्यान दें।

कॉलबैक में एक या दो पैरामीटर — d3.request में त्रुटि हैंडलिंग ()

d3.request() या सुविधा कंस्ट्रक्टर्स में से एक ( d3.json , d3.csv , d3.tsv , d3.html और d3.xml ) का उपयोग करते समय त्रुटि के लिए कई स्रोत हैं। नेटवर्क त्रुटियों के कारण जारी अनुरोध या इसकी प्रतिक्रिया के साथ समस्याएं हो सकती हैं, या यदि सामग्री अच्छी तरह से नहीं बनाई गई है तो पार्सिंग विफल हो सकती है।

उपर्युक्त विधियों में से किसी को कॉलबैक के भीतर, इसलिए, यह कुछ त्रुटि से निपटने के लिए वांछनीय है। इस प्रयोजन के लिए कॉलबैक दो तर्क स्वीकार कर सकता है, पहला त्रुटि, यदि कोई हो, तो दूसरा डेटा। यदि त्रुटि के बारे में जानकारी लोड करने या पार्स करने के दौरान कोई त्रुटि हुई है, तो data को null होने के साथ पहली तर्क error रूप में पारित किया जाएगा।

d3.json{"some_file.json", function(error, data) {
  if (error) throw error;   // Exceptions handling
  // Further processing if successful
});

आप दो मापदंडों को प्रदान करने के लिए बाध्य नहीं हैं। केवल एक पैरामीटर की विशेषता वाले कॉलबैक के साथ अनुरोध विधियों का उपयोग करना पूरी तरह से ठीक है। इन प्रकार के कॉलबैक को संभालने के लिए request.js में एक निजी फ़ंक्शन fixCallback() है, जो जानकारी को विधि के एकल तर्क में पारित होने के तरीके को समायोजित करता है।

function fixCallback(callback) {
  return function(error, xhr) {
    callback(error == null ? xhr : null);
  };
}

यह केवल एक पैरामीटर वाले सभी कॉलबैक के लिए डी 3 द्वारा लागू किया जाएगा, जो कि परिभाषा के अनुसार डेटा है।

कोई फर्क नहीं पड़ता कि अनुरोध विधि के कॉलबैक में कितने पैरामीटर दिए गए हैं, data पैरामीटर के लिए नियम है:

• यदि अनुरोध विफल हो जाता है, तो data null हो जाएगा
• यदि अनुरोध सफल होता है, तो data में लोड (और पार्स) सामग्री होगी

एक-पैरामीटर बनाम दो-पैरामीटर संस्करण के बीच एकमात्र अंतर उस तरह से है, जिसमें त्रुटि के बारे में जानकारी प्रदान की जाती है। यदि error पैरामीटर को छोड़ दिया जाता है, तो विधि चुपचाप data को null रूप में छोड़ने में विफल हो जाएगी। यदि, दूसरी ओर, कॉलबैक को दो तर्क दिए गए हैं, तो लोडिंग या पार्सिंग के दौरान एक त्रुटि के बारे में जानकारी पहले पैरामीटर को पास की जाएगी जो आपको उचित तरीके से संभालने में सक्षम बनाती है।

निम्नलिखित 3 कॉल d3.json मौजूदा / गैर-मौजूदा फ़ाइलों के लिए संभव परिदृश्यों को प्रदर्शित करते हैं। एक पैरामीटर / दो पैरामीटर कमियां:

// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
  console.log("Fail, 2 parameters: ", error, data);
});

// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
  console.log("Fail, 1 parameter: ", data);
});

// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
  console.log("OK, 2 parameters: ", error, data);
});

// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
  console.log("OK, 1 parameter: ", data);
});