با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه نهم از آموزش های دوره D3.js را با مبحث انیمیشن در D3.js آغاز می کنیم. D3.js توسط انتقال از انیمیشن پشتیبانی می کند. ما می توانیم انیمیشن را با استفاده مناسب متد انتقال انجام دهیم. انتقال یک نوع محدود شده فریم کلیدی انیمیشن در D3.js با دو فریم کلیدی همراه است: فریم شروع و پایان.همچنین با برخی متدها مانند متد ()delay در D3.js نیز آشنا خواهیم شد.
قالب اصلی شروع به طور معمول حالت فعلی DOM است، و قالب کلید پایانی مجموعه ای از ویژگی ها، سبک ها و سایر ویژگی هایی است که شما مشخص می کنید.
انتقال ها برای انتقال به یک سبک جدید بدون یک کد پیچیده مناسب هستند و این به دید اولیه بستگی دارد.
به عنوان مثال :اجازه دهید کد زیر را در صفحه “transition_color.html” در نظر بگیریم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <h3>Simple transitions</h3> <script> d3.select("body").style("background-color", "lightblue") // make the background-color lightblue.transition() .style("background-color", "gray"); // make the background-color gray </script> </body> </html> |
در اینجا، رنگ پس زمینه سند از سفید به خاکستری روشن و سپس به خاکستری تغییر می کند.
این متد صفات را به طور مساوی در طول مدت مشخص تغییر می دهد . اجازه دهید یک انتقال که ۵ ثانیه به طول می انجامد را مانند کد زیر بسازیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <h3>Simple transitions</h3> <script> d3.selectAll("h3").transition().style("color","green").duration(5000); </script> </body> </html> |
در اینجا، انتقال به صورت صاف و یکنواخت صورت گرفت. همچنین می توانیم مقدار کد رنگ RGB را مستقیما با استفاده از روش زیر تعیین کنیم.
1 | d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000); |
اکنون، هر کد رنگ به آرامی، صاف و یکنواخت از ۰ به ۱۵۰ می رود.
برای گرفتن ترکیب دقیق درون فریم یا قالب از مقدار قالب شروع به مقدار قالب پایه، D3.js از یک روش interpolate داخلی استفاده می کند.
که سینتکس آن در زیر آورده شده است :
1 | d3.interpolate(a, b) |
D3 همچنین از انواع interpolation زیر پشتیبانی می کند :
ما می توانیم از متد های interpolate به طور مستقیم برای به دست آوردن نتیجه مورد نظرمان استفاده کنیم. ما حتی می توانیم در صورت لزوم یک متد interpolate جدید ایجاد کنیم.
متد ()delay در D3.js اجازه می دهد تا پس از یک دوره زمانی خاص، انتقال رخ دهد.
کد زیر را در “transition_delay.html” در نظر بگیرید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <h3> Simple transitions </h3> <script> d3.selectAll("h3").transition() .style("font-size","28px").delay(2000).duration(2000); </script> </body> </html> |
انتقال دارای یک چرخه عمر چهار مرحله ای است :
اجازه دهید با جزییات بیشتر به این مساله بپردازیم.
زمانی که ایجاد می شود، یک انتقال برنامه ریزی شده است. هنگامی که selection.transition را فراخوانی می کنیم ، ما یک انتقال را برنامه ریزی می کنیم.
این نیز زمانی است که ما ()attr ()، style و دیگرمتدهای انتقال را برای تعریف فریم کلید پایانی فراخوانی می کنیم.
شروع انتقال با توجه به تاخیر زمانی( delay) که برنامه ریزی شده مشخص می شود.
اگر تاخیر مشخص نشده باشد، پس از آن، شروع انتقال صورت می گیرد، که معمولا بعد از چند میلی ثانیه است.
همچنین اگر انتقال تاخیر داشته باشد، پس از شروع انتقال، مقدار شروع باید تنظیم شود.
ما می توانیم با گوش دادن به رویداد شروع این کار را انجام دهیم.
1 2 3 4 5 | d3.select("body") .transition() .delay(200) .each("start", function() { d3.select(this).style("color", "green"); }) .style("color", "red"); |
هنگامی که انتقال اجرا می شود، به طور مکرر با مقادیر انتقال از ۰ به ۱ فراخوانی می شود.
علاوه بر تاخیر و مدت زمان، انتقال نیز برای کاهش کنترل زمان انجام می شود.
کاهش زمان تحریف شده، مانند آهسته شدن و کم کردن سرعت.
برخی از توابع کاهش ممکن است به طور موقت مقادیر t را بیشتر از ۱ یا کمتر از ۰ بدهند.
زمان پایان دادن به انتقال همیشه دقیقا ۱ است، به طوری که مقدار پایانی دقیقا زمانی که انتقال به پایان می رسد تعیین می شود.
یک پایان انتقال بر اساس مجموع تاخیر و مدت آن است. وقتی گذار به پایان می رسد، رویداد نهایی ارسال می شود.
آموزش انیمیشن در D3.js و متد ()delay در D3.js به پایان رسید. از آنجا که جاوا اسکریپت عموما به عنوان یک استاندارد برای توسعه محتوای وب پویا شناخته می شود، d3.js به ویژه برای ساخت گرافیک تعاملی از منبع داده ها مفید است. در جلسه بعد کشیدن نمودار در D3.js به شما عزیزان آموزش داده خواهد شد.