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



  • ۱۹
  • خرداد

جلسه ۱۷ : مقیاس API در D3.js

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

      مقدمه

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

      مقیاس API در D3.js

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

      مثال : 

      متدهای مقیاس API

      D3 متد های مقیاس گذاری زیر را برای انواع مختلف نمودارها ارائه می دهد. ارز جمله آن ها عبارتند از :

      ()d3.scaleLinear : یک مقیاس خطی پیوندی را ایجاد می کند که در آن می توانیم داده های ورودی (دامنه) را به محدوده خروجی مشخص مشخص کنیم.

      ()d3.scaleIdentity :ساخت یک مقیاس خطی که داده های ورودی همان خروجی است.

      ()d3.scaleTime : ساخت یک مقیاس خطی که داده های ورودی آن در تاریخ و خروجی در اعداد است.

      ()d3.scaleLog : ساخت مقیاس لگاریتمی.

      ()d3.scaleSqrt : ساخت مقیاس ریشه ای مربع.

      ()d3.scalePow : ساخت مقیاس نمایشی.

      ()d3.scaleSequential : ساخت یک مقیاس متوالی که در آن محدوده خروجی با استفاده از تابع interpolator ثابت می شود.

      ()d3.scaleQuantize : ساخت یک مقیاس quantize با محدوده خروجی گسسته.

      ()d3.scaleQuantile : یک مقیاس quantile که در آن داده های نمونه ورودی به محدوده خروجی گسسته می رسند، می سازد.

      ()d3.scaleThreshold : ساخت مقیاس که در آن داده های ورودی دلخواه به محدوده خروجی گسسته است.

      ()d3.scaleBand : مقیاسهای باند مانند مقیاسهای مقطع هستند البته به جز محدوده خروجی پیوسته و عددی .

      ()d3.scalePoint : ساخت مقیاس نقطه ای.

      ()d3.scaleOrdinal : یک مقیاس مرتبه ای که در آن داده های ورودی شامل الفباها هستند را ایجاد کنید و به محدوده خروجی عددی مجزا ارجاع دهید.

      قبل از انجام عملکرد مثال ، ابتدا به دو اصطلاح زیر توجه کنید:

      دامنه : دامنه حداقل و حداکثر داده های ورودی شما را نشان می دهد.

      محدوده : محدوده خروجی است، که ما می خواهیم مقادیر ورودی به نقشه به …

      عملکرد مثال

      اجازه دهید عملکرد d3.scaleLinear را در این مثال انجام دهیم. برای انجام این کار، شما باید از مراحل زیر پیروی کنید :

      مرحله ۱ : تعریف متغیرها ، متغیرها و داده های SVG را با استفاده از کدگذاری زیر تعریف کنید.

      مثال : 

      مرحله ۲ : ایجاد مقیاس خطی، برای ایجاد مقیاس خطی از کد زیر استفاده کنید.

      مثال : 

      در اینجا، برای حداقل و حداکثر مقدار دامنه به صورت دستی، می توانیم از توابع ساخته شده در ()d3.min و ()d3.max استفاده کنیم، که حداقل و حداکثر مقدار را به ترتیب از آرایه داده های ما باز می گرداند.

      مرحله ۳ : اضافه کردن ویژگی SVG ، عناصر SVG را با استفاده از کد داده شده زیر اضافه کنید.

      مثال : 

      مرحله ۴ : اعمال تغییرات ، اعمال تغییرات با استفاده از کد زیر صورت می گیرد.

      مثال : 

      مرحله ۵ : افزودن عناصر rect ، عناصر rect را به مقیاس اضافه کنید، همانطور که در زیر نشان داده شده است.

      مثال : 

      مرحله ۶ : نمایش اطلاعات ، اکنون داده ها را با استفاده از کد داده شده در زیر نشان دهید.

      مثال : 

      مرحله ۷ : عملکرد مثال، اکنون، ما یک نمودار نواری را با استفاده از تابع ()d3.scaleLinear به صورت زیر ایجاد می کنیم.

      یک صفحه وب با نام “scales.html” ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

      مثال : 

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

      مقیاس API در D3.js

      کلام آخر

      آموزش مقیاس API در D3.js و پیکربندی API در D3.js به اتمام رسید . D3 به شما این امکان را می دهد که به کمک HTML،CSS و JAVA SCRIPT به داده ها زندگی ببخشید یا اصلاحا نمودارهایی متحرک رسم کنید.در جلسه بعد محور API در D3.js را فرا خواهید گرفت.

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