با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، انتقال (transition) فرایند تغییر از یک حالت به یک حالت دیگر است. D3.js متد ()transition را برای انتقال در صفحه HTML فراهم می کند. در این جلسه از آموزش های دوره D3.js به بحث انتقال در D3.js می پردازیم.
این متد برای همه انتخابگرها (selectors)در دسترس است و روند انتقال در D3.js را شروع می کند.
همچنین این متد از بسیاری از متد های انتخاب مانند ()attr()، style و… پشتیبانی می کند.
اما از متد های ()append و ()data که باید قبل از متد ()transition فراخوانی شوند، پشتیبانی نمی کند.
همچنین، این متد روش های خاصی برای انتقال مانند ()duration(), ease و … را فراهم می کند.
1 2 3 | d3.select("body") .transition() .style("background-color", "lightblue"); |
یک انتقال می تواند به طور مستقیم توسط متد ()d3.transition ایجاد شود و سپس به همراه selector ها به صورت زیر استفاده شود.
1 2 3 4 5 | var t = d3.transition() .duration(2000); d3.select("body") .transition(t) .style("background-color", "lightblue"); |
اکنون یک مثال اساسی برای فهمیدن اینکه چگونه با قابلیت انتقال کار کنیم می آوریم.
ابتدا یک فایل HTML جدید، transition_simple.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.select("body").transition().style("background-color", "lightblue"); </script> </body> </html> |
در کد بالا عنصر body را انتخاب کردیم و پس از آن با فراخوانی متد ()transition شروع به انتقال می کنیم.
سپس، دستور دادیم رنگ پس زمینه را از رنگ فعلی،سفید به آبی روشن انتقال دهیم.
اکنون، مرورگر را تازه کرده و روی صفحه، رنگ پس زمینه از سفید به آبی روشن تغییر میکند.
اگر می خواهیم رنگ پس زمینه را از رنگ آبی به خاکستری تغییر دهیم، می توانیم از انتقال زیر استفاده کنیم.
1 | d3.select("body").transition().style("background-color", "gray"); |
تاکید D3 بر استانداردهای وب، قابلیت های کامل مرورگرهای مدرن را به شما می دهد بدون اینکه نیاز باشد به یک چارچوب خاصی وصل شوید.
همچنین امکان ترکیب اجزای بصری قدرتمند و رسم Visualization های پر قدرت را به شما می دهد.