مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه بیستم از آموزش های دوره D3.js را آغاز می کنیم. انتقال API در D3.js مبحثی است که در این جلسه به آن اختصاص داده شده است. انتقال در D3 انتخاب عناصر را برای هر عنصر می گیرد؛ این انتقال بخشی از تعریف فعلی عنصر را اعمال می کند. متدهای زمان بندی انتقال API در D3.js شامل چندین متد است که به طور کامل در این جلسه به شما توضیح خواهیم داد.
انتقال API در D3.js
در گام نخست به پیکربندی API در D3.js می پردازیم.
شما می توانید انتقال API را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :
| <script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-ease.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script src = "https://d3js.org/d3-transition.v1.min.js"></script> <script> </script> |
متدهای انتقال API
اجازه دهید به طور دقیق تر به بیان جزییات متد انتقال API بپردازیم.
انتخاب عناصر
در قسمت پایین به انواع مختلف انتخاب عناصر اشاره شده است :
([selection.transition ([name : این متد برای بازگرداندن یک عنصر منتخب انتقال جدید توسط نام استفاده می شود. اگر نام مشخص نشده باشد، مقدار صفر بازگشت داده می شود.
([selection.interrupt ([name : این متد برای ایجاد وقفه عناصر منتخب انتقال توسط نام استفاده می شود و در زیر تعریف شده است.
مثال :
| selection.interrupt().selectAll("*").interrupt(); |
([d3.interrupt (node [، name : این متد برای ایجاد وقفه برای انتقال با نام مشخص شده و در گره مشخص شده مورد استفاده قرار می گیرد.
[d3.transition ([name : این متد برای بازگرداندن یک انتقال جدید با نام مشخص شده مورد استفاده قرار می گیرد.
(transition.select (selector : این متد برای انتخاب اولین عنصر که مطابق با انتخاب مشخص شده است استفاده می شود و یک انتقال را در نتیجه انتخاب که در زیر تعریف شده است، باز می گردد.
مثال :
| transition .selection() .select(selector) .transition(transition) |
(transition.selectAll (selector : این متد برای انتخاب تمام عناصری که با انتخابگر انتخاب شده مطابقت دارد استفاده می شود و یک انتقال در نتیجه انتخاب باز می گرداند. مثال آن در زیر تعریف شده است :
مثال :
| transition .selection() .selectAll(selector) .transition(transition) |
(transition.filter (filter : این متد برای انتخاب عناصر مطابق با فیلتر مشخص شده استفاده می شود ، آنها در زیر تعریف شده اند.
مثال :
| transition .selection() .filter(filter) .transition(transition) |
(transition.merge (other : این متد برای ادغام انتقال با سایر انتقال ها مورد استفاده قرار می گیرد. جزییات آن زیر تعریف شده است.
مثال :
| transition .selection() .merge(other.selection()) .transition(transition) |
()transition.transition : این متد برای بازگشت یک انتقال جدید در عناصر انتخاب شده مورد استفاده قرار می گیرد. برنامه زمانی شروع می شود که انتقال متوقف شود. انتقال جدید نام انتقال ، مدت زمان و کاهش آن را به ارث می برد.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
| d3.selectAll(".body") .transition() // fade to yellow. .style("fill", "yellow") .transition() // Wait for five second. Then change blue, and remove. .delay(5000) .style("fill", "blue") .remove(); |
در این مثال،رنگ بدنه زرد می شود و تابع فقط پنج ثانیه قبل از آخرین انتقال شروع می شود.
([d3.active (node [، name : این متد برای بازگرداندن انتقال به گره مشخص شده با نام استفاده می شود.
متدهای زمان بندی انتقال API در D3.js
اجازه دهید با معرفی برخی از این متدها به جزییات متدهای زمان بندی انتقال API در D3.js بپردازیم.
([transition.delay ([value : این متد برای تنظیم تاخیر انتقال به مقدار مشخص شده استفاده می شود. اگر یک تابع برای هر عنصر انتخاب شده مورد ارزیابی قرار بگیرد، به داده فعلی ‘d’ و شاخص ‘i’ منتقل می شود( با محتوایی به عنوان عنصر DOM فعلی). اگر مقدار مشخص نشده باشد، مقدار فعلی تاخیر برای اولین عنصر (غیر null) در انتقال بازگردانده می شود.
مثال :
| transition.delay(function(d, i) { return i * 10; }); |
([transition.duration ([value : این متد برای تنظیم طول انتقال با مقدار مشخص شده استفاده می شود. اگر مقدار مشخص نباشد، مقدار فعلی مدت زمان برای اولین عنصر (غیر null) در انتقال بازگشت داده می شود.
([transition.ease ([value : این متد برای کاهش میزان انتقال برای عناصر انتخاب شده مورد استفاده قرار می گیرد. تابع تساوی برای هر فریم انیمیشن فراخوانی می شود و زمان نرمال شده ‘t’ را در محدوده [۰، ۱] انتقال می دهد. اگر مقدار مشخص نشده باشد، تابع فعلی برای عنصر اول (غیر صفر) در انتقال بازگردانده می شود.
کلام آخر
از جمله قابلیت های D3 : ویژگی انتقال و تغییر حالت از یک حالت به حالت دیگر: تابع ()transition در D3 تابعی بسیار قوی است و امکان انتقال و تغییر حالت را در نمودار ها فراهم کرده است. تعامل و انیمیشن: D3 ، انیمیشن های زیادی را ساپورت می کند مثل ()duration() ، Delay و ()Ease. انیمیشن ها از یک نقطه به نقطه دیگر سریع حرکت می کنند و نسبت به تعاملات کاربر پاسخگو هستند.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
