User Interaction এবং Event Handling

D3.js এর মাধ্যমে User Interaction এবং Event Handling ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। D3.js ইভেন্ট ম্যানিপুলেশনের জন্য শক্তিশালী API প্রদান করে, যা ব্যবহারকারীর ইনপুট (যেমন, ক্লিক, মাউসওভার, ড্র্যাগ) অনুযায়ী গ্রাফ বা চার্টে পরিবর্তন করতে সাহায্য করে।

D3.js ইভেন্ট হ্যান্ডলিং

D3.js ইভেন্ট হ্যান্ডলিং সিস্টেমটি DOM Events (যেমন, click, mouseover, mouseout, mousemove, keydown, ইত্যাদি) এর উপর ভিত্তি করে কাজ করে। D3.js ব্যবহারকারীর কার্যকলাপ অনুসরণ করে DOM উপাদানের উপর পরিবর্তন করতে পারে।

ইভেন্ট হ্যান্ডলার যুক্ত করা

D3.js-এ ইভেন্ট হ্যান্ডলার যোগ করতে on() মেথড ব্যবহার করা হয়। on() মেথডটি নির্দিষ্ট ইভেন্ট (যেমন, click, mouseover) এবং সংশ্লিষ্ট কার্যকলাপ (callback function) গ্রহণ করে।

সিনট্যাক্স:

d3.select("element").on("event", function(event) {
    // event handler code
});

এখানে:

• element হলো DOM এলিমেন্ট যেটিতে ইভেন্ট হ্যান্ডলার যোগ করা হবে।
• "event" হলো ইভেন্ট টাইপ (যেমন click, mouseover, mousemove ইত্যাদি)।
• function(event) হলো ইভেন্ট হ্যান্ডলার, যা ইভেন্ট ঘটলে চালু হবে।

উদাহরণ ১: ক্লিক ইভেন্ট

এখানে একটি div এলিমেন্টে ক্লিক ইভেন্ট হ্যান্ডলিং এর মাধ্যমে ব্যবহারকারীর ক্লিকের পরে কিছু পরিবর্তন করা হচ্ছে।

// একটি div তৈরি করা
d3.select("body").append("div")
                 .attr("id", "clickable")
                 .text("Click me to change my color!")
                 .style("width", "200px")
                 .style("height", "50px")
                 .style("background-color", "lightblue")
                 .style("text-align", "center")
                 .style("line-height", "50px");

// ক্লিক ইভেন্ট যোগ করা
d3.select("#clickable").on("click", function() {
    d3.select(this).style("background-color", "lightcoral");  // রঙ পরিবর্তন
    d3.select(this).text("I was clicked!");  // টেক্সট পরিবর্তন
});

এখানে:

• প্রথমে একটি div তৈরি করা হয়েছে এবং কিছু স্টাইল যোগ করা হয়েছে।
• ক্লিক করার পর div এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে এবং টেক্সট পরিবর্তন করা হয়েছে।

উদাহরণ ২: মাউসওভার এবং মাউসআউট ইভেন্ট

এখানে মাউসওভার এবং মাউসআউট ইভেন্টের মাধ্যমে একটি circle এলিমেন্টের রঙ পরিবর্তন করা হচ্ছে।

// SVG তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 400)
              .attr("height", 200);

// একটি circle তৈরি করা
svg.append("circle")
   .attr("cx", 100)
   .attr("cy", 100)
   .attr("r", 50)
   .style("fill", "steelblue");

// মাউসওভার এবং মাউসআউট ইভেন্ট হ্যান্ডলিং
svg.select("circle")
   .on("mouseover", function() {
       d3.select(this).style("fill", "orange");  // রঙ পরিবর্তন
   })
   .on("mouseout", function() {
       d3.select(this).style("fill", "steelblue");  // পূর্ববর্তী রঙে ফিরিয়ে আনা
   });

এখানে:

• mouseover ইভেন্টে মাউস circle এলিমেন্টের উপরে এলে তার রঙ পরিবর্তন হচ্ছে।
• mouseout ইভেন্টে মাউস যখন circle এলিমেন্টের বাইরে চলে যায়, তখন তার রঙ পূর্ববর্তী অবস্থায় ফিরে আসছে।

উদাহরণ ৩: মাউসমুভ (Mousemove) ইভেন্ট

mousemove ইভেন্ট ব্যবহার করে ডেটা পয়েন্টের উপর মাউসের অবস্থান ট্র্যাক করা এবং সেই অনুযায়ী গ্রাফ বা চার্টে পরিবর্তন আনা যায়।

// SVG তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// মাউস পয়েন্টের অবস্থান ট্র্যাক করা
svg.on("mousemove", function(event) {
    const coords = d3.pointer(event);  // মাউসের বর্তমান অবস্থান (x, y)
    console.log("Mouse Coordinates: ", coords);
});

এখানে:

• d3.pointer(event) মেথড ব্যবহার করে মাউসের বর্তমান x এবং y কোঅর্ডিনেট বের করা হচ্ছে।
• এটি আপনাকে মাউসের অবস্থান অনুযায়ী ডেটা বা গ্রাফিক্যাল উপাদানগুলোর উপর ইন্টারঅ্যাকশন পরিচালনা করতে সহায়ক।

উদাহরণ ৪: ড্র্যাগ (Drag) ইভেন্ট

D3.js-এ drag ইভেন্ট ব্যবহার করে আপনি ব্যবহারকারীর ড্র্যাগিং এর মাধ্যমে DOM উপাদানকে মুভ (সরানো) করতে পারেন। D3.js-এর d3.drag() ফাংশন ব্যবহার করে এটি করা যায়।

// SVG তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// একটি circle তৈরি করা
const circle = svg.append("circle")
                  .attr("cx", 100)
                  .attr("cy", 100)
                  .attr("r", 30)
                  .style("fill", "green");

// ড্র্যাগ ইভেন্ট হ্যান্ডলার
const drag = d3.drag()
               .on("drag", function(event) {
                   d3.select(this)
                     .attr("cx", event.x)  // ড্র্যাগ করার সময় x অবস্থান
                     .attr("cy", event.y); // ড্র্যাগ করার সময় y অবস্থান
               });

circle.call(drag);  // circle এ ড্র্যাগ ইভেন্ট কল করা

এখানে:

• d3.drag() ফাংশন ব্যবহার করে circle এলিমেন্টটি ড্র্যাগ করার সময় তার cx এবং cy অ্যাট্রিবিউট পরিবর্তন করা হচ্ছে, যাতে এটি ব্যবহারকারীর ড্র্যাগ অনুযায়ী মুভ করতে পারে।

ইভেন্টের সম্পর্কিত কিছু গুরুত্বপূর্ণ মেথড

• event.target: এই মেথডটি ইভেন্টের মূল লক্ষ্য (target) উপাদানটিকে রিটার্ন করে।
• event.sourceEvent: মূল DOM ইভেন্ট (যেমন click, mouseover) এর সুত্র।
• d3.pointer(event): মাউস পয়েন্টের অবস্থান (x, y) পাওয়ার জন্য ব্যবহৃত হয়।

D3.js-এ User Interaction এবং Event Handling ডেটা ভিজ্যুয়ালাইজেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। on() মেথডের মাধ্যমে আপনি ডিফারেন্ট ইভেন্ট যেমন click, mouseover, mousemove, drag, ইত্যাদির সাথে ইন্টারঅ্যাকশন তৈরি করতে পারেন। এতে আপনার ভিজ্যুয়ালাইজেশনকে ব্যবহারকারীর কার্যকলাপ অনুসারে প্রতিক্রিয়া জানানো যায়, যা একটি উন্নত এবং মজাদার ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সহায়ক।