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



  • ۱۹
  • خرداد

جلسه ۱۰ : رسم نمودار در D3.js

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

      فهرست  

      مقدمه

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

      انواع نمودار در D3.js

      ما می توانیم انواع مختلفی از رسم نمودار در D3.js را داشته باشیم :

      • نمودار میله ای
      • نمودار دایره ای
      • نمودار دایره ای(نوع دوم)
      • نمودار گرد
      • نمودار خطی
      • نمودار حبابی و …

      در مورد رسم نمودار در D3.js توضیحاتی داده شده است. بگذارید هر یک از این نمودار ها را با جزئیات بیاموزیم.

      نمودار میله ای

      نمودارهای میله ای یکی از رایج ترین انواع رسم نمودار در D3.js هستند و برای نمایش و مقایسه اعداد، فرکانس یا سایر مقادیر (به عنوان مثال میانگین) برای دسته ها یا گروه های گسسته استفاده می شود.

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

      محور x (محور افقی) دسته های مختلفی را نشان می دهد که مقیاس ندارند.

      محور y (محور عمودی) دارای یک مقیاس است و نشان دهنده واحدهای اندازه گیری است.

      میله ها می توانند به صورت عمودی یا افقی بسته به تعداد دسته ها و طول یا پیچیدگی دسته بندی شوند.

      رسم یک نمودار میله ای

      اجازه دهید با استفاده از D3 یک نمودار میله ای را در SVG ایجاد کنیم.

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

      با استفاده از D3 برای ایجاد یک نمودار میله ای در SVG ، باید مراحل زیررا دنبال کنید.

      مرحله ۱ : افزودن سبک در عنصر مستطیل ، اجازه دهید سبک زیر را به عنصر مستطیل اضافه کنیم.

      مثال : 

      مرحله ۲ : اضافه کردن سبک در عنصر متن، اضافه کردن کلاس CSS زیر برای اعمال سبک به مقادیر متن. این سبک را به عنصر متن SVG اضافه کنید.

      مثال : 

      اینجا، برای اعمال رنگ پر می شود. Text-anchor برای قرار دادن متن در انتهای سمت راست نوارها استفاده می شود.

      مرحله ۳ : تعریف متغیرها ، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. همانطور که در زیر توضیح داده شده است.

      مثال : 

      در این مثال :

      Width : عرض SVG است.

      Scalefactor : مقیاس بندی یک مقدار به پیکسل است که روی صفحه نمایش قابل مشاهده است.

      Barheight : ارتفاع استاتیک از میله های افقی است.

      مرحله ۴ – اضافه کردن عناصر SVG ، اجازه دهیدبا استفاده از کد زیر عناصر SVG را در D3  اضافه کنیم.

      مثال : 

      در اینجا، ابتدا بدنه سند را انتخاب کرده، و سپس یک عنصر جدید SVG را ایجاد و آن را اضافه می کنیم.

      پس از اینکه گراف نواری مان را در عنصر SVG ساختیم. عرض و ارتفاع SVG را تنظیم کنید. ارتفاع برابر است با : ارتفاع نوار * تعداد مقادیر داده .

      ما ارتفاع نوار را ۳۰ گرفته ایم و طول آرایه داده ۴ است. پس ارتفاع SVG به این صورت محاسبه می شود : ارتفاع ۳۰*۴ که برابر۱۲۰ پیکسل است.

      مرحله ۵ : اعمال تغییرات. اجازه دهید تغییرات در نوار را با استفاده از کد زیر اعمال کنیم.

      مثال : 

      هر نوار در داخل مربوط به یک عنصر است. بنابراین، ما عناصر گروه را ایجاد می کنیم.

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

      فرمول انتقال به صورت کلی می شود : (فهرست)index * (ارتفاع نوار)bar height

      مرحله ۶ : عناصر rect را به نوار اضافه کنید :

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

      مثال : 

      عرض برابر با : (مقدار داده * مقیاس عامل) و ارتفاع (ارتفاع نوار – حاشیه) است.

      مرحله ۷ : نمایش اطلاعات – این آخرین مرحله است. بگذارید داده ها را در هر نوار با استفاده از کد زیر نمایش دهیم.

      مثال : 

      عرض به عنوان (مقدار داده * scalefactor) تعریف می شود. عناصر متن، پوسته یا حاشیه را پشتیبانی نمی کنند.

      به همین دلیل ما نیاز به offset با نام “Dy” داریم. این مورد برای تنظیم کردن متن به صورت عمودی استفاده می شود.

      مرحله ۸ : نحوه کار کردن مثال، لیست کد کامل در بلوک کد زیر نمایش داده می شود. یک صفحه وب barcharts.html ایجاد کنید و تغییرات زیر را اضافه کنید.

      barcharts.html

      مثال : 

      یک درخواست به مرورگر خود بدهید، پاسخ زیر را خواهید دید.

      رسم نمودار در D3.js

      نمودار دایره ای در D3.js

      نمودار دایره ای یک گرافیک آماری دایره ای است که به شکلی تقسیم می شود تا نسبت عددی را نشان دهد.

      رسم یک نمودار دایره ای

      اجازه دهید یک نمودار دایره ای را در SVG با استفاده از D3 ایجاد کنیم. برای انجام این کار، ما باید به مراحل زیر پیروی کنیم :

      مرحله ۱ : تعریف متغیرها ، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. این کار در بلوک کد زیر نشان داده شده است.

      مثال : 

      در اینجا :

      Width : عرض SVG است.

      Height : ارتفاع SVG است.

      Data : آرایه ای از عناصر داده می باشد.

      Colors : رنگ ها را به عناصر دایره اعمال می کند.

      مرحله ۲ : اضافه کردن عناصر SVG ،اجازه دهید عناصر SVG را در D3 با استفاده از کد زیر اضافه کنیم.

      مثال : 

      مرحله ۳ : اعمال تغییرات ، اجازه دهید تغییرات را در SVG با استفاده از کد زیر اعمال کنیم.

      مثال : 

      (“var g = svg.selectAll (“g : عنصر گروه برای نگه داشتن حلقه ها ایجاد می کند.
      (data (data : آرایه داده های ما را به عناصر گروه متصل می کند.
      ()enter : متغیرهایی را برای عناصر گروه ایجاد می کند.
      (:”append (“g: عناصر گروه را به صفحه اضافه می کند.

      مثال : 

      در این قسمت، translate برای موقعیت عناصر با توجه به مبدأ استفاده می شود.

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

      مثال : 

      سپس، با استفاده از کد زیر، صفات را به گروه اضافه کنید.

      مثال : 

      در اینجا ما از مختصات x از مرکز هر حلقه استفاده می کنیم. شاخص دایره را با ۷۵ ضرب می کنیم و به دایره ها پدینگ ۵۰ را اضافه می کنیم.
      سپس، مختصات y را از مرکز هر حلقه تنظیم می کنیم.

      اینکار برای پوشاندن تمام حلقه ها استفاده می شود و کد آن در زیر تعریف شده است.

      مثال : 

      اکنون، شعاع هر دایره را تنظیم کنید.

      مثال : 

      شعاع با مقدار داده ضرب می شود و ثابت “۱٫۵” برای افزایش اندازه دایره است. در آخر، با استفاده از کد زیر رنگها را برای هر حلقه اختصاص می دهیم.

      مثال : 

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

      مثال : 

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

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

      circlecharts.html

      مثال : 

      با فرستادن درخواست به مرورگر خود نمودار زیرا مشاهده خواهید کرد.نمودار دایره ای در D3.js

      نمودار دایره ای(نوع دوم)

      نمودار دایره ای یک نمودار ویژه است که از قطاع‌های دایره‌ای برای نشان دادن اندازه نسبی داده‌ها استفاده می‌کند.

      ساده ترین تمثیل برای نمودار دایره‌ای، تشبیه آن به یک پیتزا است.

      بدین ترتیب می‌توانید قا‌چ‌های پیتزا را قطاع‌های نمودار در نظر بگیرید. برای توضیح بیشتر مثالی را در ادامه ارائه کرده‌ایم.

      رسم یک نمودار دایره ای در D3.js

      قبل از شروع به رسم نمودار دایره ای در D3.js ، ما باید دو متد زیر را یاد بگیریم : متد ()d3.arc و متد ()d3.pie .

      اجازه دهید هر دو روش را با جزئیات توضیح دهیم.

      متد ()d3.arc

      متد ()d3.arc قوس(arc) را تولید می کند. شما به تنظیم شعاع داخلی و شعاع بیرونی برای قوس نیاز دارید.

      اگر شعاع داخلی ۰ باشد، نتیجه یک نمودار دایره ای در D3.js خواهد بود، در غیر این صورت نتیجه یک نمودار دوناتی است که در بخش بعدی بحث شده است.

      متد ()d3.pie

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

      یک داده از مجموعه داده ها را می گیرد و زاویه شروع و زاویه پایان برای هر گره نمودار دایره را محاسبه می کند.

      با استفاده از مراحل زیر یک نمودار دایره ای بسازید.

      مرحله ۱ : اعمال سبک – اجازه دهید سبک زیر را به عنصر arc(قوس) اعمال کنیم.

      مثال : 

      fill برای اعمال رنگ هاست. text-anchor موقعیت متن را از مرکز arc تعیین می کند.

      مرحله ۲ : تعریف متغیرها، تعریف متغیرها در اسکریپت زیر نشان داده شده است.

      مثال : 

      Width : عرض SVG است.
      Height : ارتفاع SVG است.
      Radius : با استفاده از تابع Math.min محاسبه می شود. ۲/(عرض، ارتفاع) ؛

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

      مثال : 

      حالا رنگ ها را با استفاده از تابع d3.scaleOrdinal به صورت زیر وارد کنید.

      مثال : 

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

      مثال : 

      شما می توانید مقادیر درصد را تعیین کنید. یک تابع برای بازگشت d.percent لازم است و آن را به عنوان مقدارpie تعیین می کند.

      مرحله ۵ : تعریف arcs، پس از ایجاد نمودار دایره ای،برای هر pie wedges یک arc با استفاده از تابع زیر داده شده تعریف کنید.

      مثال : 

      arc به عناصر مسیر تنظیم می شود. شعاع محاسبه شده با outerradius تنظیم شده است، در حالی که innerradius به ۰ تنظیم شده است.

      مرحله ۶ : برچسب ها را درwedges اضافه کنید : با ارائه شعاع، برچسب ها را در حلقه ها قرار دهید.کد ها به شرح زیر تعریف شده است.

      مثال : 

      مرحله ۷ : خواندن داده ها یک گام مهم است. ما می توانیم داده ها را با استفاده از تابع داده شده در زیر بخوانیم.

      مثال : 

      populations.csv شامل فایل داده است. تابع d3.csv اطلاعات از مجموعه داده را می خواند.

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

      مرحله ۸ : بارگذاری داده ، گام بعدی بارگذاری داده ها با استفاده از کد زیر است :

      مثال : 

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

      مرحله ۹ : افزودن مسیر،اکنون، مسیر را اضافه کنید و همانطور که در زیر نشان داده شده است، کلاس ‘arc’ را به گروه ها اختصاص دهید.

      مثال : 

      fill برای اعمال رنگ داده هاست. از تابع d3.scaleOrdinal گرفته شده است.

      مرحله ۱۰ : اضافه کردن متن ، برای نمایش متن در برچسب می توان از کد زیر استفاده کرد.

      مثال : 

      عنصر SVG text برای نمایش متن در برچسب ها استفاده می شود.

      الگویی که قبلا ایجاد کردیم با استفاده از ()d3.arc یک نقطه مرکزی را نشان می دهد، که موقعیتی برای برچسب است.

      در نهایت، داده ها را با استفاده از d.data.browser ارائه می کنیم.

      مرحله ۱۱ : افزودن عناصر گروهی ، صفات عناصر گروه را اضافه کنید و عنوان class را برای رنگ متن بفرستید .

      آن را به صورت ایتالیک(مورب) قرار دهید، همانطورکه در مرحله ۱ مشخص شده است و در زیر تعریف شده است.

      مثال : 

      مرحله ۱۲ : عملکرد مثال، برای رسم نمودار، می توانیم مجموعه ای از جمعیت هند را جمع کنیم.

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

      population.csv

      مثال : 

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

      مثال : 

      نمودار دایره ای در D3.js

      نمودار دوناتی

      نمودار دونات فقط یک نمودار پایه ساده با یک حفره در داخل است.

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

      همچنین ما می توانیم یک نمودار دونات را به جای نمودار دایره ای ایجاد کنیم.

      شعاع داخلی قوس( arc) را تغییر دهید تا مقدار بیشتری از صفر استفاده شود.

      مثال : 

      همانند نمودار دایره ای و با شعاع داخلی کمی تغییر یافته، می توانیم یک نمودار دونات ایجاد کنیم.

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

      Donutchart.html

      مثال : 

      در اینجا متغیر path را به صورت زیر تغییر دادیم:

      مثال : 

      مقدار internalRadius> 0 را برای ایجاد یک نمودار دونات تنظیم می کنیم.
      در نهایت، با فرستادن درخواست در مرورگرما می توانیم پاسخ زیر را مشاهده کنیم.

      کلام آخر

      رسم نمودار در D3.js راه حل خوبی برای نمایش اندازه‌های مرتبط با هم است. به طور فرضی توسط نمودار با یک نگاه می‌توان فهمید کدام سبک فیلم بیشتر از همه و کدام کمتر از همه مورد پسند بوده است. شما نیز می‌توانید برای داده‌های خودتان نمودارهای مختلفی را رسم کنید. آموزش رسم نمودار در D3.js به پایان رسید با ما همراه باشید تا در جلسه بعد با گراف ها در این فریم ورک آشنا شوید.

      QR:  جلسه ۱۰ : رسم نمودار در D3.js
      به اشتراک بگذارید