سه شنبه , اردیبهشت ۳۱ ۱۳۹۸
خانه / D3JS / آموزش D3 – دریافت داده ها
آموزش D3

آموزش D3 – دریافت داده ها

در فصل قبل ما با کلیات D3 آشنا شدیم در این فصل، ما یاد میگیریم که چگونه داده ها را از انواع مختلف ساختار فایل بارگیری و آن را به عناصر DOM مرتبط کنیم. D3 می تواند انواع مختلفی از داده ها را به صورت محلی در متغیرها یا از فایل های خارجی تعریف کند.

بطور کلی D3 روش های زیر را برای بارگیری انواع مختلف داده ها از فایل های خارجی فراهم می کند.

d3.csv () CSV دریافت فایل ها با فرمت
d3.json () JSON دریافت فایل ها با فرمت
d3.tsv () TSV دریافت فایل ها با فرمت
d3.xml () XML دریافت فایل ها با فرمت

()d3.csv

d3.csv (url [، row، callback])؛

اولین پارامتر آدرس فایل csv. یا webApi یا وب سرویس است که داده های csv را پشتیبانی می کند. دومین پارامتر اختیاری یک تابع تبدیل داده ها است که به ما اجازه می دهد تغییر ورودی ها را می دهد. پارامتر اختیاری سوم یک callback function است که یکبار فایل داده های CSV بارگذاری می شود.

نگاهی به نحوه بارگیری داده های زیر CSV ذخیره شده در فایل با نام employee.csv می گذاریم.

//employee.csv
Name, Age
John, 30
Jane, 32

فایل employee.csv را در پوشه داده پوشه ریشه پروژه خود کپی کنید و کد زیر را در تگ<script> بنویسید .

<script>
d3.csv("/data/employees.csv", function(data) {
    for (var i = 0; i < data.length; i++) {
        console.log(data[i].Name);
        console.log(data[i].Age);
    }
});
</script>

مثال بالا را در یک مرورگر اجرا کنید و ابزار Inspect Element را باز کنید و بر روی زبانه Console کلیک کنید و نتیجه زیر را مشاهده کنید.

همانطور که در مثال فوق دیده می شود، عملکرد ()d3.csv  نام فایل را به عنوان یک ورودی می گیرد، پروسس فایل را بارگذاری می کند و داده ها را به یک آرایه ای از اشیا بار می کند.توجه داشته باشید که ردیف اول فایل CSV چاپ نمی شود. این به این دلیل است که ردیف اول به عنوان نام ستون رفتار می شود و بقیه ردیف ها به عنوان داده ها در نظر گرفته می شوند. شی داده داده شده توسط d3 از این نام ستون به عنوان خواص شی استفاده می کند و از این رو به کلیدهای شی تبدیل می شود.

حال Data را بوسیله Console چاپ کنید.

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

همانطور که در خروجی مشاهده می کنید داده خروجی بصورت یک Object در خروجی نشان داده شده است.

 

دستور ()d3.csv را می توان به شکل زیر هم استفاده کرد.

d3.csv("/data/employees.csv")
  .get(function(data) {
        console.log(data);
  });

همچنین می توان از ()d3.request استفاده کرد.

d3.request("/data/employees.csv")
  .mimeType("text/csv")
  .response(function (xhr) { return d3.csvParse(xhr.responseText); })
  .get(function(data) {
      console.log(data);
  });

پارامتر دوم ()d3.csv که بصورت اختیاری بود به روش زیر قابل استفاده است و میتوان تغییراتی در داده بوجود آورد.

d3.csv("/data/employees.csv")
  .row(function(d) {
        return {
            age: d.age,
            name: d.name.toUpperCase() // converting name to upper case 
        }; 
   })
  .get(function(data) {
      console.log(data);
  });

d3.json

داده JSON می تواند یک شی یا یک آرایه از اشیاء JSON باشد.

 //  json object
var nameObj = {
    "name": "John",
    "age": 30,
    "city": "New York"
};


// json array
var nameArray = [{
    "name": "John",
    "age": 30,
    "city": "New York"
},
{
    "name": "Jane",
    "age": 20,
    "city": "San Francisco"
}];
d3.json (url، callback)؛

پارامترهای متد ()d3.json و متد های بعدی مشابه ()d3.csv عمل میکنند پس از زیاده گویی پرهیز می کنیم.

d3.tsv

این فایل ها مشابه csv هستند با این تفاوت که بجای کاما از فاصله استفاده می کنیم.
//tsv file

Name    Age
John    30
Jane    32

d3.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
<row>
    <Name>John</Name>
    <Age>30</Age>
</row>
<row>
    <Name>Jane</Name>
    <Age>32</Age>
</row>
</root>

مدیریت خطا

در حال بارگیری داده ها از یک منبع ، D3 یک خروجی به نام error را باز می گرداند. شما می توانید از این خروجی برای بررسی اینکه آیا اطلاعات شما با موفقیت بارگیری شده است یا خیر، استفاده کنید.

d3.json("\data\users.json", function(error, data) {
    
    if (error) {
        return console.warn(error);
    }

    d3.select("body")
            .selectAll("p")
            .data(data)
            .enter()
            .append("p")
            .text(function(d) {
                return d.name + ", " + d.location;
            });
    });

 

 

 

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.