DOM এলিমেন্ট নির্বাচন করা এবং ম্যানিপুলেশন

D3.js এর মাধ্যমে DOM (Document Object Model) এলিমেন্ট নির্বাচন এবং ম্যানিপুলেশন খুবই সহজ। DOM নির্বাচনের জন্য d3.select() এবং d3.selectAll() মেথড ব্যবহার করা হয়, এবং নির্বাচিত DOM এলিমেন্টগুলির উপর বিভিন্ন অপারেশন যেমন স্টাইলিং, অ্যাট্রিবিউট ম্যানিপুলেশন, টেক্সট পরিবর্তন ইত্যাদি করা যায়।

১. DOM এলিমেন্ট নির্বাচন করা

D3.js-এ DOM এলিমেন্ট নির্বাচন করতে d3.select() এবং d3.selectAll() মেথড ব্যবহৃত হয়।

১.১ d3.select() মেথড

d3.select() মেথডটি DOM-এ প্রথম মেলানো একক উপাদান নির্বাচন করে। এটি একটি সিলেক্টর ব্যবহার করে, যেমন h1, div, p ইত্যাদি, এবং শুধুমাত্র প্রথম মেলানো উপাদানটি ফেরত দেয়।

সিনট্যাক্স:

d3.select("element");

উদাহরণ:

// প্রথম h1 এলিমেন্ট নির্বাচন করা এবং তার টেক্সট পরিবর্তন করা
d3.select("h1").text("Hello, D3.js!");

এটি পেজের প্রথম h1 ট্যাগটিকে নির্বাচন করবে এবং তার টেক্সট পরিবর্তন করবে "Hello, D3.js!"।

১.২ d3.selectAll() মেথড

d3.selectAll() মেথডটি DOM-এ সমস্ত মেলানো উপাদান নির্বাচন করে। এটি একটি সিলেক্টর ব্যবহার করে সমস্ত মেলানো উপাদানগুলি ফিরিয়ে দেয় এবং সেই উপাদানগুলির উপর একই অপারেশন কার্যকর করা হয়।

সিনট্যাক্স:

d3.selectAll("element");

উদাহরণ:

// সমস্ত p ট্যাগ নির্বাচন করে তাদের রঙ নীল করা
d3.selectAll("p").style("color", "blue");

এটি পেজে থাকা সমস্ত p ট্যাগের রঙ নীল করে দিবে।

২. DOM ম্যানিপুলেশন

D3.js আপনাকে নির্বাচিত DOM উপাদানগুলির উপর বিভিন্ন পরিবর্তন (ম্যানিপুলেশন) করার সুযোগ দেয়, যেমন স্টাইল যোগ করা, অ্যাট্রিবিউট পরিবর্তন, ইভেন্ট হ্যান্ডলিং, টেক্সট পরিবর্তন ইত্যাদি।

২.১ স্টাইল পরিবর্তন

style() মেথডের মাধ্যমে DOM উপাদানগুলোর CSS স্টাইল পরিবর্তন করা যায়।

উদাহরণ:

// প্রথম div ট্যাগ নির্বাচন করে তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
d3.select("div").style("background-color", "lightblue");

এটি প্রথম div ট্যাগটির ব্যাকগ্রাউন্ড রঙ lightblue করে দিবে।

২.২ অ্যাট্রিবিউট পরিবর্তন

attr() মেথডের মাধ্যমে DOM উপাদানের অ্যাট্রিবিউট (যেমন width, height, href ইত্যাদি) পরিবর্তন করা যায়।

উদাহরণ:

// প্রথম svg উপাদানটির প্রস্থ পরিবর্তন করা
d3.select("svg").attr("width", 500);

এটি প্রথম svg উপাদানের প্রস্থ 500 পিক্সেল সেট করবে।

২.৩ টেক্সট পরিবর্তন

text() মেথডের মাধ্যমে DOM উপাদানের টেক্সট পরিবর্তন করা যায়।

উদাহরণ:

// প্রথম p ট্যাগ নির্বাচন করে তার টেক্সট পরিবর্তন করা
d3.select("p").text("This is a new text content");

এটি প্রথম p ট্যাগটির টেক্সট পরিবর্তন করবে।

২.৪ ক্লাস যোগ বা মুছে ফেলা

classed() মেথডের মাধ্যমে ক্লাস যোগ বা মুছে ফেলা যায়।

উদাহরণ:

// প্রথম div ট্যাগে 'highlight' ক্লাস যোগ করা
d3.select("div").classed("highlight", true);

এটি প্রথম div ট্যাগে highlight ক্লাস যোগ করবে।

২.৫ ইভেন্ট হ্যান্ডলিং

on() মেথড ব্যবহার করে DOM উপাদানের উপর ইভেন্ট হ্যান্ডলার যোগ করা যায়।

উদাহরণ:

// div ট্যাগে ক্লিক ইভেন্ট হ্যান্ডলার যোগ করা
d3.select("div").on("click", function() {
    alert("You clicked on the div!");
});

এটি প্রথম div ট্যাগে ক্লিক করলে একটি এলার্ট প্রদর্শন করবে।

৩. ডাইনামিক DOM উপাদান তৈরি

D3.js দিয়ে নতুন DOM উপাদান তৈরি এবং সেটার ওপর স্টাইল, অ্যাট্রিবিউট এবং টেক্সট প্রয়োগ করা সম্ভব। enter() মেথড এবং ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটার ভিত্তিতে নতুন DOM উপাদান তৈরি করা যায়।

উদাহরণ:

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

// SVG তৈরি করা এবং বার চার্ট তৈরি
const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 400);

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 50)
   .attr("height", d => d)
   .attr("x", (d, i) => i * 60)
   .attr("y", d => 400 - d)
   .style("fill", "steelblue");

এটি একটি SVG তৈরি করে এবং ডেটার ভিত্তিতে বার চার্ট তৈরি করবে।

D3.js ব্যবহার করে DOM এলিমেন্ট নির্বাচন এবং ম্যানিপুলেশন একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য যা ডেটা-ড্রিভেন ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়ক। select() এবং selectAll() মেথডের মাধ্যমে DOM উপাদান নির্বাচন এবং style(), attr(), text(), classed() ইত্যাদি মেথডের মাধ্যমে ম্যানিপুলেশন করা সম্ভব।