تحميل البيانات من ملفات CSV في D3 v5

في D3 v4، كان تحميل البيانات من ملفات CSV أمرًا سهلاً باستخدام XMLHttpRequest. ومع ذلك، مع تقديم Promises في D3 v5، تغيرت العملية قليلاً.

باستخدام D3 v5

لتحميل البيانات من ملف CSV باستخدام D3 v5، يمكنك يمكن الاستفادة من واجهة برمجة تطبيقات الجلب () . إليك كيفية تعديل التعليمات البرمجية الخاصة بك:

d3.csv('data/dataset.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 واجهة برمجة تطبيقات Promise، والتي تسمح لك بالتعامل مع حالات النجاح والفشل بشكل منفصل. تُستخدم الدالة 'then()' للتعامل مع حالة النجاح، بينما تُستخدم الدالة 'catch()' لمعالجة الأخطاء.

مثال

يوفر مقتطف التعليمات البرمجية التالي مثال كامل لكيفية تحميل البيانات من ملف CSV باستخدام D3 v5:

d3.csv('yourcsv.csv') .ثم (وظيفة (بيانات) { // البيانات أصبحت الآن مجموعة بيانات كاملة // ارسم المخطط هنا! }) .قبض (وظيفة (خطأ) { // التعامل مع الخطأ })

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

من خلال الاستفادة من Promise API، يوفر D3 v5 طريقة أكثر تنظيمًا ومرونة للتعامل مع تحميل البيانات غير المتزامنة مقارنةً بـ D3 v4.