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



  • ۱۹
  • خرداد

جلسه ۰۸ : انتقال در D3.js

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

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، انتقال (transition) فرایند تغییر از یک حالت به یک حالت دیگر است. D3.js متد ()transition را برای انتقال در صفحه HTML فراهم می کند. در این جلسه از آموزش های دوره D3.js به بحث انتقال در D3.js می پردازیم.

      متد ()transition

      این متد برای همه انتخابگرها (selectors)در دسترس است و روند انتقال در D3.js را شروع می کند.

      همچنین این متد از بسیاری از متد های انتخاب مانند ()attr()، style و… پشتیبانی می کند.

      اما از متد های ()append و ()data که باید قبل از متد ()transition فراخوانی شوند، پشتیبانی نمی کند.

      همچنین، این متد روش های خاصی برای انتقال مانند ()duration(), ease و … را فراهم می کند.

      یک انتقال ساده می تواند به صورت زیر تعریف شود:

      مثال : 

      یک انتقال می تواند به طور مستقیم توسط متد ()d3.transition ایجاد شود و سپس به همراه selector ها به صورت زیر استفاده شود.

      مثال : 

      یک نمونه کوچک

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

      ابتدا یک فایل HTML جدید، transition_simple.html با کد زیر ایجاد کنید.

      مثال : 

      در کد بالا عنصر body را انتخاب کردیم و پس از آن با فراخوانی متد ()transition شروع به انتقال می کنیم.

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

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

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

      مثال : 

      کلام آخر

      تاکید D3 بر استانداردهای وب، قابلیت های کامل مرورگرهای مدرن را به شما می دهد بدون اینکه نیاز باشد به یک چارچوب خاصی وصل شوید.

      همچنین امکان ترکیب اجزای بصری قدرتمند و رسم Visualization های پر قدرت را به شما می دهد.

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