Transition মেথড ব্যবহার করে এনিমেশন তৈরি

D3.js-এ Transition মেথড ব্যবহার করে DOM উপাদানগুলির মধ্যে পরিবর্তন এনিমেশন আকারে প্রদর্শন করা যায়। এটি গ্রাফিক্স এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। Transition মেথডে সময়, ইasing (অভিযোজন) এবং অন্যান্য প্রোপার্টি ব্যবহার করে সুন্দর এনিমেশন তৈরি করা সম্ভব।

Transition মেথডের মৌলিক ধারণা

D3.js-এ Transition মেথড DOM উপাদানগুলির মধ্যে পর্যায়ক্রমিক পরিবর্তন তৈরি করে। এর মাধ্যমে একটি পরিবর্তনকে একধাপে অন্যধাপে অনুকূলভাবে স্থানান্তর করা যায়, যা অ্যাপ্লিকেশনের ভিজ্যুয়াল ইফেক্টে গতিশীলতা নিয়ে আসে। Transition ব্যবহার করলে, যেকোনো DOM এলিমেন্টের স্টাইল, আকার বা অবস্থান পরিবর্তন ধীরে ধীরে এবং সফটভাবে ঘটবে।

১. Transition মেথড ব্যবহার

সিনট্যাক্স:

d3.select("element")
  .transition()         // Transition শুরু
  .duration(1000)       // সময় (milliseconds)
  .ease(d3.easeLinear)  // ইasing ফাংশন
  .attr("attribute", value);  // নতুন অ্যাট্রিবিউট

বিশদ ব্যাখ্যা:

• transition(): ট্রানজিশন শুরু করার জন্য এটি কল করা হয়।
• duration(): ট্রানজিশনের সময়কাল, মিলিসেকেন্ডে (যেমন 1000 মিলিসেকেন্ড = 1 সেকেন্ড)।
• ease(): ইasing ফাংশন যা ট্রানজিশনকে আরও ন্যাচারাল বা সোজা করতে সাহায্য করে।
• attr(), style(), text(): এই মেথডগুলির মাধ্যমে DOM উপাদানের অ্যাট্রিবিউট, স্টাইল বা টেক্সট পরিবর্তন করা হয়।

২. Transition মেথডের উদাহরণ

উদাহরণ ১: বারের উচ্চতা পরিবর্তন

এখানে একটি বার চার্ট তৈরি করা হবে এবং এর উপর Transition মেথড ব্যবহার করে বারের উচ্চতা ধীরে ধীরে পরিবর্তন করা হবে।

const data = [30, 80, 45, 60, 120];

// SVG ক্যানভাস তৈরি
const svgWidth = 500;
const svgHeight = 300;
const barWidth = svgWidth / data.length;

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// বার চার্ট তৈরি
const bars = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", svgHeight)
    .attr("width", barWidth - 5)
    .attr("height", 0)
    .style("fill", "steelblue");

// Transition এ মাধ্যমে বার গুলোর উচ্চতা বাড়ানো
bars.transition()
    .duration(1500)      // 1.5 সেকেন্ডে ট্রানজিশন হবে
    .attr("y", d => svgHeight - d)  // y পজিশন পরিবর্তন
    .attr("height", d => d);       // বার উচ্চতা পরিবর্তন

ব্যাখ্যা:

1. প্রথমে rect এলিমেন্টের height 0 এবং y svgHeight সেট করা হয়েছে (যাতে সেগুলি স্ক্রীনে দৃশ্যমান না হয়)।
2. তারপর transition() মেথড ব্যবহার করে বারের উচ্চতা ধীরে ধীরে d (ডেটা) মান অনুযায়ী বৃদ্ধি করা হচ্ছে।

উদাহরণ ২: বারের রঙ পরিবর্তন

এখন, আমরা বারের রঙ পরিবর্তন করব একটি ট্রানজিশন ব্যবহার করে।

// SVG ক্যানভাস
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// বার তৈরি করা
const bars = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", svgHeight)
    .attr("width", barWidth - 5)
    .attr("height", 0)
    .style("fill", "steelblue");

// ট্রানজিশন ব্যবহার করে রঙ পরিবর্তন
bars.transition()
    .duration(1500)
    .style("fill", "orange");  // রঙ পরিবর্তন

এটি বারের রঙকে ১.৫ সেকেন্ডে orange রঙে পরিবর্তন করবে।

৩. ইasing ফাংশন ব্যবহার

Easing ফাংশন D3.js-এ ব্যবহৃত হয় ট্রানজিশনের গতিকে নিয়ন্ত্রণ করতে। এতে বিভিন্ন ধরনের ইasing ফাংশন রয়েছে, যেমন easeLinear, easeBounce, easeElastic, ইত্যাদি।

উদাহরণ ৩: Bounce ইasing ফাংশন

bars.transition()
    .duration(1500)
    .ease(d3.easeBounce)  // Bounce ইasing ব্যবহার
    .attr("y", d => svgHeight - d)
    .attr("height", d => d);

এখানে Bounce ইasing ফাংশন ব্যবহার করা হয়েছে, যা ট্রানজিশনটির শেষের দিকে একটি বাউন্সিং ইফেক্ট তৈরি করবে।

৪. Transition-এ Delay এবং Repeat ব্যবহার

D3.js-এ আপনি delay() মেথড ব্যবহার করে ট্রানজিশন শুরু করার আগে কিছু বিলম্ব যোগ করতে পারেন। এছাড়াও, ট্রানজিশন পুনরায় চালানো যায়।

উদাহরণ ৪: Delay এবং পুনরাবৃত্তি

bars.transition()
    .delay(500)          // 0.5 সেকেন্ড পর ট্রানজিশন শুরু হবে
    .duration(1500)
    .attr("y", d => svgHeight - d)
    .attr("height", d => d)
    .on("end", function() {
        d3.select(this)
          .transition()    // ট্রানজিশন শেষ হলে পুনরায় শুরু হবে
          .duration(1000)
          .style("fill", "green");
    });

এটি প্রথমে বারের উচ্চতা পরিবর্তন করবে এবং পরে রঙ পরিবর্তন করবে। এতে ট্রানজিশনের শেষে একটি পুনরাবৃত্তি দেখা যাবে।

D3.js-এ Transition মেথড ব্যবহার করে বিভিন্ন ধরনের এনিমেশন তৈরি করা যায়, যা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। duration(), ease(), এবং delay() মেথড ব্যবহার করে আপনি সহজেই ট্রানজিশন কাস্টমাইজ করতে পারবেন। এটি গ্রাফিক্স এবং ডেটা ভিজ্যুয়ালাইজেশনে শক্তিশালী এনিমেশন এবং গতিশীল ইফেক্ট প্রদান করে।