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



  • ۱۹
  • خرداد

جلسه ۱۹ : شکل API در D3.js

  • دسته‌بندی‌ها :
جلسه ۱۹ : شکل API در D3.js
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

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

      پیکربندی API در D3.js

      شما می توانید شکل API در D3.js را با استفاده از اسکریپت زیر پیکربندی کنید.

      مثال : 

      ژنراتورهای شکل

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

      API Arcs

      ژنراتور قوس (Arcs) یک دایره یا شکل حلقه ای تولید می کند.از این متد API در فصل نمودار دایره ای در جلسه های قبلی استفاده کرده ایم. بگذارید روش های مختلف Arcs API را با جزئیات بیشتر درک کنیم.

      ()d3.arc :این متد برای ایجاد یک ژنراتور قوس جدید استفاده می شود.

      (arc (args : برای تولید قوس با عنصرهای مشخص شده استفاده می شود. تنظیمات پیش فرض با شعاع و زاویه شی در زیر تعریف شده است.

      مثال : 

      (arc.centroid (args : این متد برای محاسبه نقطه میانی [x، y] از مرکز خط قوس با عناصر مشخص شده است.

      ([arc.innerRadius ([radius : این متد برای تنظیم شعاع داخلی از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می شود.

      مثال : 

      ([arc.outerRadius ([radius : این متد نیز برای تنظیم شعاع بیرونی از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می شود. مثال آن به شرح زیر تعریف شده است.

      مثال : 

      ([arc.cornerRadius ([radius : این متد برای تنظیم شعاع کنج از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می شود و به شرح زیر تعریف شده است.

      مثال : 

      اگر شعاع کنج بزرگتر از صفر باشد، کنج های قوس با استفاده از حلقه های شعاع داده شده گرد می شود. شعاع گوشه نباید بزرگتر از outerRadius – innerRadius) / 2) باشد.

      ([arc.startAngle ([angle : این متد برای تنظیم زاویه شروع تابع از زاویه داده شده استفاده می شود و به شرح زیر تعریف شده است:

      مثال : 

      ([arc.endAngle([angle : این متد برای تنظیم زاویه پایانی تابع از زاویه داده شده استفاده می شود و به شرح زیر تعریف شده است.

      مثال : 

      ([arc.padAngle ([angle : این متد برای تنظیم زاویه پد(pad) به عملکرد از زاویه داده شده استفاده می شود.

      مثال : 

      ([x) arc.padRadius ([radius) : این متد برای تنظیم شعاع پد به تابع مشخص شده از شعاع داده شده استفاده می شود. شعاع پد تعیین کننده فاصله ثابت فیکس شده می باشد و باعث جدا کردن قوس مجاور می شود، برابر است با padRadius * padAngle.

      ([xi) arc.context([context) : این متد برای تنظیم محتوا و بازگرداندن ژنراتور قوس استفاده می شود.

      API دایره ای

      این API برای ایجاد یک ژنراتور دایره ای(Pie) استفاده می شود. ما این متد API را در فصل قبل انجام داده ایم. تمام این متد ها را به طور جدی مورد بحث قرار خواهیم داد.

      ()d3.pie :یک ژنراتور دایره ای جدید را با تنظیمات پیش فرض ایجاد می کند.

      ([pie (data [، arguments : این متد برای تولید یک دایره برای مقدار آرایه داده شده استفاده می شود. آرایه ای از اشیا را باز می گرداند. اشیاء در حقیقت زاویه قوس داده هستند. هر شیء دارای خواص زیر است :

      data : داده ورودی؛ عنصر متناظر در آرایه داده ورودی می باشند .
      value : مقدار عددی قوس را نشان می دهد.

      index : نشان دهنده فهرست قوس.

      startAngle : زاویه شروع قوس.

      endAngle – زاویه پایانی قوس.

      padAngle : زاویه پد کمان.

      ([pie.value ([value : این متد برای تنظیم مقدار برای تابع مشخص شده و تولید یک دایره استفاده می شود که به شرح زیر تعریف شده است:

      مثال : 

      ([pie.sort ([compare : این متد برای مرتب کردن داده های تابع مشخص شده استفاده می شود و دایره تولید می کند. تابع مقایسه کننده به شرح زیر تعریف شده است.

      مثال : 

      در اینجا، تابع مقایسه دارای دو عنصر ‘a’ و ‘b’ است، هر عنصر از آرایه داده ورودی است. اگر قوس برای ‘a’ قبل از قوس ‘b’ باشد، مقایسه کننده باید یک عدد کمتر از صفر را بازگرداند. اگر قوس برای ‘a’ بعد از قوس ‘b’ باشد، مقایسه کننده باید یک عدد بیشتر از صفر را بازگرداند.

      ([pie.sortValues ([compare : این متد برای مقایسه مقدار از تابع داده شده و تولید یک دایره استفاده می شود. تابع به شرح زیر تعریف شده است.

      مثال : 

      ([pie.startAngle ([angle : این متد برای تنظیم زاویه شروع دایره به تابع مشخص شده استفاده می شود. اگر زاویه مشخص نشده باشد، زاویه شروع فعلی را باز می گرداند و به شرح زیر تعریف شده است.

      مثال : 

      ([pie.endAngle ([angle : این متد برای تنظیم زاویه پایانی دایره به تابع مشخص شده استفاده می شود. اگر زاویه مشخص نشده باشد، زاویه پایان فعلی را باز می گرداند و به شرح زیر تعریف شده است.

      مثال : 

      ([pie.padAngle([angle : این متد برای تنظیم زاویه پد(pad) به تابعد مشخص شده و برای تولید دایره استفاده می شود. تابع به شرح زیر تعریف شده است.

      مثال : 

      خطوط API در D3.js

      خطوط API در D3.js برای تولید خط استفاده می شود. از این متد API در فصل Graphs استفاده کرده ایم.

      ()d3.line : این متد برای ایجاد ژنراتور خط جدید استفاده می شود.

      (line (data : این متد برای تولید یک خط برای آرایه داده شده استفاده می شود.

      ([line.x ([x : این متد برای تنظیم x accessor به تابع مشخص شده وبرای تولید یک خط است. این تابع با مثال در قسمت زیر تعریف شده است :

      مثال : 

      ([line.y ([y : این متد برای تنظیم دسترسی ‘y’ به تابع مشخص شده می باشد و خط را تولید می کند. تابع آن به شرح زیر تعریف شده است.

      مثال : 

      ([line.defined([defined : این متد برای تعیین دسترسی به تابع مشخص شده استفاده می شود.

      مثال : 

      ([line.curve([curve : برای تنظیم منحنی و ایجاد خط استفاده می شود.

      (line.context (context : این متد برای تنظیم زمینه و تولید یک خط استفاده می شود. اگر متن مشخص نشده باشد، مقدار صفر بازگردانده می شود.

      ()d3.lineRadial : این متد برای ایجاد خط شعاعی جدید استفاده می شود. معادل با ژنراتور خط دکارتی است.

      ([lineRadial.radius ([radius : این متد برای رسم خط شعاعی استفاده می شود و دسترسی به شعاع را بازمی گرداند و فاصله از مبدأ را از (۰،۰) می گیرد.

      کلام آخر

      D3  داده محور است، D3  قابلیت این را دارد که از داده های استاتیک استفاده کند و یا داده ها رو از روی سرور و با فرمت های مختلف مثل  آرایه، CSV، JSON و XML و …  واکشی کند و نمودارهای مختلفی را  رسم کند. در فصل بعد، ما درباره رنگ های API در D3.js را یاد خواهیم گرفت.

      QR:  جلسه ۱۹ : شکل API در D3.js
      به اشتراک بگذارید