۱۹
خرداد

جلسه ۲۴ : درخواست API در D3.js

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در این جلسه از آموزش های دوره D3.js در مورد درخواست API در D3.js بحث خواهیم کرد. D3.js یک درخواست API را برای انجام XMLHttpRequest فراهم می کند. این فصل درخواست های مختلف API و متدهای درخواست API در D3 را با جزئیات توضیح می دهیم.

انواع درخواست API در D3.js

XMLHttpRequest

با در خواست XMLHttp کلاینت های Http می توانند اشیاء XMLHttpRequest را محاسبه کنند. این می تواند با JS طراحی شده مرورگرها برای بهبود استفاده مجدد از کد و اجازه استفاده از کتابخانه های موجود استفاده شود.شما می توانید این ماژول را در پروژه خود قرار دهید و به عنوان شیء XHR مبتنی بر مرورگر همانطور که در زیر توضیح داده شده استفاده کنید.

مثال :

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

1 2	var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; var xhr = new XMLHttpRequest();

این از هر دو درخواست های غیر همزمان و همزمان را پشتیبانی می کند و درخواست های GET، POST، PUT و DELETE را انجام می دهد.

پیکربندی درخواست ها

شما می توانید مستقیما از “d3js.org” اسکریپت زیر بارگذاری کنید.

مثال :

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

d3.json("/path/to/sample.json", callback);

</script>

درخواستهای API دارای پشتیبانی داخلی برای تجزیه JSON، CSV و TSV هستند. شما می توانید فرمت های دیگر را با استفاده از درخواست یا متن به طور مستقیم تجزیه کنید.

بارگذاری فایل های متنی

برای بارگذاری یک فایل متنی، از سینتکس زیر استفاده کنید.

مثال :

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text); 
});

d3.text("/path/to/sample.txt", function(error, text) {

if (error) throw error;

console.log(text);

});

تجزیه فایل های CSV

برای بارگیری و تجزیه یک فایل CSV، از سینتکس زیر استفاده کنید.

مثال :

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data); 
});

d3.csv("/path/to/sample.csv", function(error, data) {

if (error) throw error;

console.log(data);

});

به طور مشابه، شما می توانید فایل های JSON و TSV را نیز بارگیری کنید.

عملکرد مثال

اجازه دهید از طریق یک مثال ساده چگونگی بارگیری و تجزیه یک فایل CSV را دریابیم. قبل از آن، شما باید یک فایل CSV با نام “sample.csv” در پوشه برنامه D3 خود ایجاد کنید، همانطور که در زیر نشان داده شده است.

مثال :

Num1,Num2
1,2
3,4
5,6
7,8
9,10

Num1,Num2

1,2

3,4

5,6

7,8

9,10

اکنون، یک صفحه وب “requests.html” با استفاده از اسکریپت زیر ایجاد کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data); 
         });
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3> D3.js Requests API </h3>

d3.csv("sample.csv", function(data) {

console.log(data);

});

</script>

</body>

</html>

اکنون، از مرورگر درخواست کنید و پاسخ زیر را ببینید. درخواست API در D3.js

متدهای درخواست API در D3

بعضی از متدهای درخواست API در D3 که بیشتر مورد استفاده قرار می گیرند به شرح زیر می باشند.

[(d3.request(url[, callback

[(request.header(name[, value

[(request.mimeType([type

[(request.user([value

[(request.password([value

[(request.timeout([timeout

[(request.get([data

[(request.post([data

[(request.send(method[, data

()request.abort

[(d3.csv(url[[, row], callback

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

[(d3.request(url[, callback

این متد یک درخواست جدید برای URL داده شده را باز می گرداند. اگر یک تماس تلفنی اختصاص داده شود، آن را به عنوان یک درخواست فراخوانی در نظر گرفته در غیر این صورت درخواست فراخوانی نمی شود.

مثال :

d3.request(url)
   .get(callback);

1 2	d3.request(url) .get(callback);

شما می توانید برخی از پارامترهای پرس و جو را با استفاده از سینتکس زیر ارسال کنید.

مثال :

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

d3.request("/path/to/resource")

.header("X-Requested-With", "XMLHttpRequest")

.header("Content-Type", "application/x-www-form-urlencoded")

.post("a = 2&b = 3", callback);

اگر می خواهید یک درخواست header یا یک نوع MIME را مشخص کنید، نباید سازنده را فراخوانی کنید.

[(request.header(name[, value

این برای تعیین مقدار برای درخواست header با نام مشخص شده استفاده می شود. اگر مقدار مشخص نشده باشد، درخواست header را با نام مشخص شده حذف می کند.

مثال :

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

d3.request(url)

.header("Accept-Language", "en-US")

.header("X-Requested-With", "XMLHttpRequest")

.get(callback);

در اینجا، درخواست X-Requested با Header به XMLHttpRequest یک درخواست پیش فرض است.

([request.mimeType([type

این متد برای اختصاص دادن نوع MIME به مقدار داده شده استفاده می شود. به مثال زیر توجه کنید.

مثال :

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

d3.request(url)

.mimeType("text/csv")

.get(callback);

([request.user ([value

این متد برای تعیین نام کاربری برای احراز هویت استفاده می شود. اگر یک نام کاربری مشخص نشده باشد، به صورت پیش فرض صفر می شود.

([request.password ([value

اگر مقدار مشخص شده باشد، برای احراز هویت رمز عبور تعیین می کند.

([request.timeout ([timeout

اگر یک وقفه مشخص شده باشد، زمان را به تعداد مشخصی از میلی ثانیه تعیین می کند.

([request.get ([data

این متد برای ارسال درخواست با روش GET استفاده می شود.

مثال :

request.send("GET", data, callback);

1	request.send("GET", data, callback);

([request.post([data

این متد برای ارسال درخواست با روش POST استفاده می شود و در قسمت زیر تعریف شده است.

مثال :

request.send("POST", data, callback);

1	request.send("POST", data, callback);

([request.send(method[, data])

برای ارسال درخواست با استفاده از متدهای GET یا POST داده شده است.

()request.abort

این متد برای لغو درخواست استفاده می شود.

([d3.csv(url[[, row], callback

یک درخواست جدید برای فایل CSV را در آدرس مشخص شده با پیش فرض Mime type text / csv می پذیرد.

مثال :

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

d3.request(url)

.mimeType("text/csv")

.response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

اگر یک فراخوانی مجدد را با متد POST مشخص کنید، نمونه آن در زیر تعریف شده است.

مثال :

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

d3.request(url)

.mimeType("text/csv")

.response(function(xhr) { return d3.csvParse(xhr.responseText, row); })

.post(callback);

مثال

یک فایل CSV با نام “lang.csv” را در پوشه D3 خود ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

مثال :

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

Year,Language,Author

1972,C,Dennis Ritchie

1995,Java,James gosling

2011,D3 js,Mike Bostock

یک صفحه وب “csv.html” را ایجاد و اسکریپت زیرا به آن اضافه کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3> D3.js request API</h3>

d3.csv("lang.csv", function(d) {

return {

year: new Date(+d.Year, 0, 1), // convert "Year" column to Date

language: d.Language,

author: d.Author,

};

}, function(error, rows) {

console.log(error);

console.log(rows[0].year);

});

</script>

</body>

</html>

اکنون از مرورگر درخواست کنید و پاسخ زیر را مشاهده کنید. متدهای درخواست API در D3

کلام آخر

درخواست API در D3.js نیز به اتمام رسید D3 خاصیت انعطاف پذیری برای ایجاد خواص پویا و داینامیک را در بیشتر توابع دارد. حتی ویژگی و Feature های یک نمودار می تواند به عنوان یک تابع تعریف شود و این بدان معناست که داده های شما می توانند سبک و استایل و ویژگی خاصی که مد نظر شماست را داشته باشند.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۴ : درخواست API در D3.js

مقدمه

انواع درخواست API در D3.js

XMLHttpRequest

پیکربندی درخواست ها

بارگذاری فایل های متنی

تجزیه فایل های CSV

عملکرد مثال

متدهای درخواست API در D3

[(d3.request(url[, callback

[(request.header(name[, value

([request.mimeType([type

([request.user ([value

([request.password ([value

([request.timeout ([timeout

([request.get ([data

([request.post([data

([request.send(method[, data])

()request.abort

([d3.csv(url[[, row], callback

مثال

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ