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



  • ۱۹
  • خرداد

جلسه ۲۷ : مثال کاربردی با D3.js

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

      مقدمه

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

      مثال کاربردی با D3.js

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

      برای این مثال کاربردی با D3.js ، از فایل data.csv استفاده شده در فصل قبل از پرونده های جمعیت به عنوان مجموعه داده استفاده می کنیم و نمودار نواری متحرک در D3.js ایجاد می کنیم.

      برای انجام این کار، باید مراحل زیر را انجام دهیم :

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

      مثال : 

      مرحله ۲ : تعریف متغیرها ، اکنون اجازه دهید ویژگی های SVG را با استفاده از اسکریپت زیر تعریف کنیم.

      مثال : 

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

      مثال : 

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

      مثال : 

      مرحله ۵ : خواندن داده ها ، ما قبلا فایل data.csv را در نمونه های قبلی ایجاد کرده ایم.

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

      مثال : 

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

      مثال : 

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

      مثال : 

      مرحله ۷ : اضافه کردن محور X، حالا شما می توانید محور X را به تغییرات اضافه کنید.

      همانطور که در زیر نشان داده شده است.

      مثال : 

      مرحله ۸ : اضافه کردن محور Y ، با استفاده از کد داده شده زیر، محور Y را به تغییرات اضافه کنید.

      مثال : 

      مرحله ۹ : عناصر گروه را اضافه کنید، اکنون عناصر گروه را اضافه کنید و اعمال تغییرات را به محور Y به صورت زیر تعریف کنید.

      مثال : 

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

      مثال : 

      در اینجا، ما رویداد listener را برای mouseout و mouseover اضافه کردیم تا عمل انیمیشن صورت بگیرد.

      این عمل انیمیشن را هنگامی که ماوس روی یک نوار خاص قرار می گیرد و از آن خارج می شود اجرا می کند.

      این توابع در مرحله بعد توضیح داده شده است.

      تابع (ease(d3.easeLinear. برای انجام حرکت ظاهری در انیمیشن استفاده می شود.

      این روند حرکت slow-in و slow-out را با مدت زمان ۲۰۰ پردازش می کند.

      همچنین تاخیر را می توان با استفاده از دستورات زیر محاسبه کرد :

      مثال : 

      مرحله ۱۱ – تابع handler رویداد موس، اجازه دهید یک handler رویداد mouseover را برای رسیدگی به یک رویداد ماوس به صورت زیر نشان بدهیم.

      مثال : 

      در این مثال ، توسط رویداد mouseover، ما می خواهیم عرض و ارتفاع نوار را افزایش دهیم، و رنگ نوار انتخاب انتخابی را به قرمز تغییر دهیم.

      برای رنگ، یک کلاس اضافه کرده ایم که رنگ نوار انتخاب شده را به رنگ قرمز تغییر می دهد.

      یک تابع انتقال به نوار برای مدت ۲۰۰ میلی ثانیه نیز در نظر گرفتیم .

      هنگامی که عرض نوار را ۵ پیکسل و ارتفاع آن را نیز ۱۰ پیکسل افزایش دهیم :

      انتقال از عرض و ارتفاع قبلی به عرض و ارتفاع جدید به مدت ۲۰۰ میلی ثانیه بعد اتفاق می افتد.

      سپس ، یک مقدار جدید ‘y’ را با نوار محاسبه کردیم، به طوری که نوار با توجه به مقدار ارتفاع جدید تحریف نشود.

      مرحله ۱۲ – تابع handler رویداد ماوس(Mouseout) ، اجازه دهید یک handler رویداد mouseout را برای رسیدگی به رویداد ماوس ایجاد کنیم.

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

      مثال : 

      در اینجا، در رویداد mouseout، ما می خواهیم ویژگی های انتخابی را که ما در رویداد mouseover اعمال کردیم حذف کنیم.

      بنابراین کلاس class bar را به کلاس ‘bar’ واقعی تغییر می دهیم.

      همچنین عرض و ارتفاع اصلی نوار انتخاب شده را بازسازی می کنیم و مقدار y را به مقدار اصلی بازگردانیم.

      تابع ()d3.selectAll(‘.val’).remove برای حذف محتوای متن که در انتخاب نوار اضافه کردیم استفاده می شود.

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

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

      مثال : 

      حالا مرورگر را درخواست کنید و پاسخ زیر را مشاهده نمایید. (نمودار نواری متحرک در D3.js)مثال کاربردی با D3.js

      کلام آخر

       مثال کاربردی با D3.js نیز زده شد. D3 با داشتن محیطی بسیار ساده و انعطاف پذیر ، امکان مصور سازی داده ها را به بهترین شکل ممکن برای کاربران به وجود آورده است.به طور کلی می توان گفت D3 شبیه به Protovis است، اما Protovis برای مصور سازی استاتیک انجام می شود، در حالی که D3  بیشتر روی تعاملی بودن و انتقال داده ها متمرکز شده است.

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