D3.js-এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য হলো সিলেকশন (Selection) এবং ডেটা বাইন্ডিং (Data Binding)। সিলেকশন ব্যবহার করে DOM (Document Object Model) উপাদান নির্বাচন করা হয় এবং ডেটা বাইন্ডিং এর মাধ্যমে সেই নির্বাচিত উপাদানের সাথে ডেটা যুক্ত করা হয়। এর ফলে ডেটার উপর ভিত্তি করে DOM উপাদান তৈরি, আপডেট এবং মুছে ফেলা যায়।
সিলেকশন (Selection)
কি?
D3.js-এ সিলেকশন হলো DOM থেকে উপাদান নির্বাচন করার একটি পদ্ধতি। এটি d3.select() এবং d3.selectAll() মেথড ব্যবহার করে করা হয়।
সিলেকশনের ধরণ
d3.select(): একক একটি DOM উপাদান নির্বাচন করে।d3.selectAll(): একাধিক DOM উপাদান নির্বাচন করে।
উদাহরণ:
// একক উপাদান নির্বাচন
d3.select("h1")
.text("This is a heading selected by D3.js");
// একাধিক উপাদান নির্বাচন
d3.selectAll("p")
.style("color", "blue");
ফলাফল:
h1ট্যাগের টেক্সট পরিবর্তিত হবে।- সব
pট্যাগের রঙ নীল হয়ে যাবে।
ডেটা বাইন্ডিং (Data Binding)
কি?
ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা DOM উপাদানের সাথে সংযুক্ত করা হয়। D3.js-এ data() মেথড ব্যবহার করে ডেটা DOM-এর সাথে বাইন্ড করা হয় এবং enter(), update(), এবং exit() মেথড ব্যবহার করে DOM পরিচালনা করা হয়।
ডেটা বাইন্ডিং প্রক্রিয়া
data()মেথড: ডেটাসেট DOM উপাদানের সাথে বাইন্ড করে।enter()মেথড: ডেটা অনুযায়ী নতুন DOM উপাদান তৈরি করে।update()মেথড: বিদ্যমান DOM উপাদান আপডেট করে।exit()মেথড: অপ্রয়োজনীয় DOM উপাদান মুছে ফেলে।
উদাহরণ:
// ডেটাসেট
const data = [10, 20, 30, 40];
// ডেটা বাইন্ড এবং নতুন DOM তৈরি
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => d * 10 + "px")
.style("background", "steelblue")
.style("margin", "5px")
.style("color", "white")
.text(d => d);
ফলাফল:
body-তে প্রতিটি ডেটার জন্য একটি নতুনdivতৈরি হবে।- প্রতিটি
div-এর প্রস্থ ডেটার মান অনুযায়ী হবে এবং ব্যাকগ্রাউন্ড রঙ নীল হবে।
enter(), update(), এবং exit() মডেল
D3.js-এ DOM পরিচালনা করার জন্য enter-update-exit মডেল গুরুত্বপূর্ণ।
উদাহরণ:
// ডেটাসেট
const data = [10, 20, 30];
// সিলেকশন এবং ডেটা বাইন্ডিং
const selection = d3.select("body")
.selectAll("p")
.data(data);
// নতুন ডেটার জন্য DOM তৈরি
selection.enter()
.append("p")
.text(d => "New Value: " + d);
// বিদ্যমান DOM আপডেট
selection
.text(d => "Updated Value: " + d);
// অপ্রয়োজনীয় DOM মুছে ফেলা
selection.exit().remove();
প্রক্রিয়া:
enter(): নতুনpট্যাগ যোগ করে।update(): বিদ্যমানpট্যাগ আপডেট করে।exit(): অতিরিক্তpট্যাগ মুছে ফেলে।
সিলেকশন এবং ডেটা বাইন্ডিং এর ব্যবহারক্ষেত্র
- চার্ট তৈরি করা: ডেটার ভিত্তিতে বার, লাইন বা পাই চার্ট তৈরি।
- ডেটা ভিজ্যুয়ালাইজেশন আপডেট: নতুন ডেটা এলে ভিজ্যুয়ালাইজেশন আপডেট করা।
- ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি: ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে DOM পরিবর্তন।
D3.js-এর সিলেকশন এবং ডেটা বাইন্ডিং একটি শক্তিশালী টুলসেট, যা DOM উপাদানকে ডেটার সাথে সংযুক্ত করে কার্যকরী এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করে। এটি ডেভেলপারদের ডেটা-ড্রিভেন ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
D3.js-এ সিলেকশন মেথড দুটি গুরুত্বপূর্ণ মেথড select() এবং selectAll() প্রদান করে, যা DOM (Document Object Model) থেকে একক বা একাধিক উপাদান নির্বাচন করতে ব্যবহৃত হয়। এই মেথডগুলির সাহায্যে DOM উপাদানগুলি নির্বাচন করা হয় এবং সেগুলোর উপর ডেটা বা স্টাইলিং প্রয়োগ করা হয়।
d3.select() মেথড
d3.select() মেথড একটি একক DOM উপাদান নির্বাচন করে। এটি DOM-এ প্রথম ম্যাচ করা উপাদানটি নির্বাচন করবে এবং সেটি ফেরত দিবে।
সিম্পল সিনট্যাক্স:
d3.select("element");
উদাহরণ:
// প্রথম h1 ট্যাগ নির্বাচন করে তার টেক্সট পরিবর্তন করা
d3.select("h1")
.text("Hello, D3.js!");
এই কোডটি পেজে প্রথম h1 ট্যাগটিকে নির্বাচন করবে এবং তার টেক্সট পরিবর্তন করে "Hello, D3.js!" হবে।
d3.selectAll() মেথড
d3.selectAll() মেথড DOM-এ একাধিক উপাদান নির্বাচন করে। এটি একটি সিলেক্টর (যেমন div, p, span, ইত্যাদি) ব্যবহার করে সমস্ত মেলানো উপাদান নির্বাচন করে এবং তাদের উপর একই একক অপারেশন প্রয়োগ করে।
সিম্পল সিনট্যাক্স:
d3.selectAll("element");
উদাহরণ:
// সব p ট্যাগকে নির্বাচন করে তাদের রঙ নীল করা
d3.selectAll("p")
.style("color", "blue");
এই কোডটি পেজে সমস্ত p ট্যাগ নির্বাচন করে তাদের টেক্সটের রঙ নীল করে দিবে।
select() এবং selectAll() এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | d3.select() | d3.selectAll() |
|---|---|---|
| উপাদান নির্বাচন | একক উপাদান নির্বাচন | একাধিক উপাদান নির্বাচন |
| ফলাফল | প্রথম মেলানো উপাদান | সমস্ত মেলানো উপাদান |
| ব্যবহার | একক উপাদান পরিবর্তন বা প্রভাবিত করা | একাধিক উপাদান একসাথে পরিবর্তন বা প্রভাবিত করা |
উদাহরণ ১: একক উপাদান নির্বাচন
// প্রথম div নির্বাচন এবং তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা
d3.select("div")
.style("background-color", "lightblue");
এই কোডটি প্রথম div ট্যাগটিকে নির্বাচন করে এবং তার ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে।
উদাহরণ ২: একাধিক উপাদান নির্বাচন
// সমস্ত p ট্যাগ নির্বাচন করে তাদের ফন্ট সাইজ বড় করা
d3.selectAll("p")
.style("font-size", "20px");
এই কোডটি সমস্ত p ট্যাগগুলিকে নির্বাচন করে তাদের ফন্ট সাইজ ২০px করে দিবে।
select() এবং selectAll()-এর আরও ব্যবহার
DOM উপাদান নির্বাচন এবং পরিবর্তন:
d3.select()ব্যবহার করে DOM উপাদান নির্বাচন করা এবং তার উপর পরিবর্তন করা।d3.selectAll()ব্যবহার করে একাধিক উপাদান নির্বাচন এবং একটি একক অপারেশন প্রয়োগ করা।
উদাহরণ: সব li উপাদান নির্বাচন এবং তাদের টেক্সট পরিবর্তন
// সব li উপাদান নির্বাচন এবং তাদের টেক্সট পরিবর্তন
d3.selectAll("li")
.text(function(d, i) {
return "Item " + (i + 1) + ": " + d;
});
এখানে, প্রতিটি li ট্যাগের টেক্সট পরিবর্তন হবে, যেখানে d হচ্ছে ডেটা এবং i হচ্ছে ইনডেক্স (অথবা স্থান)।
d3.select() এবং d3.selectAll() D3.js এর গুরুত্বপূর্ণ মেথড যা DOM থেকে উপাদান নির্বাচন করতে ব্যবহৃত হয়। d3.select() একক উপাদান নির্বাচনের জন্য এবং d3.selectAll() একাধিক উপাদান নির্বাচনের জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি ডেটা বাইন্ডিং, স্টাইলিং এবং অন্যান্য 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() ইত্যাদি মেথডের মাধ্যমে ম্যানিপুলেশন করা সম্ভব।
D3.js (Data-Driven Documents) এর মাধ্যমে ডেটা বাইন্ডিং হল একটি প্রক্রিয়া যার মাধ্যমে ডেটা এবং DOM (Document Object Model) উপাদানগুলিকে সংযুক্ত করা হয়। এটি ডেটা ড্রিভেন ভিজ্যুয়ালাইজেশন তৈরির একটি গুরুত্বপূর্ণ অংশ, যা D3.js-কে অত্যন্ত শক্তিশালী এবং নমনীয় করে তোলে। ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটার ভিত্তিতে DOM উপাদান তৈরি, আপডেট, এবং মুছে ফেলা যায়।
ডেটা বাইন্ডিং প্রক্রিয়া
D3.js-এ ডেটা বাইন্ডিং সাধারণত ৩টি প্রধান পর্যায়ে সম্পন্ন হয়:
- ডেটা নির্বাচন (Data Selection)
- DOM উপাদান তৈরি (DOM Element Creation)
- DOM আপডেট এবং মুছে ফেলা (DOM Update and Removal)
এগুলি D3.js-এর enter(), update(), এবং exit() মেথডের মাধ্যমে পরিচালিত হয়।
১. ডেটা বাইন্ডিংয়ের প্রাথমিক ধারণা
ডেটা বাইন্ডিংয়ের মাধ্যমে D3.js ডেটাসেটের প্রতি একটি DOM উপাদান সংযুক্ত করে। D3.js এই প্রক্রিয়াটিকে অত্যন্ত দক্ষভাবে পরিচালনা করে, যেখানে ডেটা অবজেক্টগুলির মান অনুযায়ী HTML বা SVG উপাদান তৈরি হয়।
ডেটা বাইন্ডিং এর ধাপগুলো:
- ডেটা প্রদান: ডেটাসেট DOM উপাদানের সাথে বাইন্ড করা হয়।
- DOM উপাদান তৈরি: ডেটার জন্য নতুন DOM উপাদান তৈরি করা হয়।
- DOM আপডেট: পূর্বের DOM উপাদানগুলির মান আপডেট করা হয়।
- DOM অপসারণ: অতিরিক্ত বা অপ্রয়োজনীয় DOM উপাদানগুলি মুছে ফেলা হয়।
২. enter(), update(), এবং exit() মডেল
D3.js-এ ডেটা বাইন্ডিং ব্যবস্থাপনা জন্য তিনটি গুরুত্বপূর্ণ মেথড ব্যবহৃত হয়:
enter(): নতুন ডেটা আসলে নতুন DOM উপাদান তৈরি করে।update(): বিদ্যমান DOM উপাদানগুলির মান আপডেট করে।exit(): ডেটা কম হলে অতিরিক্ত DOM উপাদানগুলি মুছে ফেলে।
উদাহরণ:
// ডেটাসেট
const data = [30, 40, 50, 60, 70];
// DOM উপাদান তৈরি এবং ডেটা বাইন্ডিং
d3.select("body")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", d => d * 10 + "px")
.style("height", "50px")
.style("background-color", "steelblue")
.style("margin", "5px");
// বিদ্যমান div আপডেট
d3.select("body")
.selectAll("div")
.data(data)
.style("height", d => d + "px");
বিস্তারিত ব্যাখ্যা:
data(data): ডেটাসেটটি DOM উপাদানগুলির সাথে বাইন্ড করে।enter(): নতুন ডেটার জন্য নতুনdivতৈরি করা হয়।style(): প্রতিটিdiv-এর গুণমান (height, width) ডেটা অনুযায়ী নির্ধারণ করা হয়।update(): বিদ্যমানdivউপাদানগুলোর আকার আপডেট করা হয়।
৩. ডেটা বাইন্ডিংয়ের মাধ্যমে DOM উপাদান তৈরি
ডেটা বাইন্ডিংয়ের মাধ্যমে DOM উপাদান তৈরি করার সময় enter() মেথড ব্যবহার করা হয়। এটি নতুন ডেটা আসলে নতুন DOM উপাদান তৈরি করে।
উদাহরণ:
// ডেটাসেট
const data = [100, 200, 300, 400, 500];
// ডেটা বাইন্ডিং এবং SVG তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 600)
.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");
এখানে:
data()মেথড ডেটাকে SVG উপাদানের সাথে বাইন্ড করছে।enter()মেথড নতুনrectউপাদান তৈরি করছে।style()মেথডটিrectউপাদানের স্টাইল নির্ধারণ করছে।
এই কোডের মাধ্যমে একটি বার চার্ট তৈরি হবে যেখানে প্রতিটি বারের উচ্চতা ডেটার মান অনুযায়ী হবে।
৪. update() এবং exit() মেথড
update() মেথড
ডেটা আপডেট হলে, বিদ্যমান DOM উপাদানগুলোর মান আপডেট করা হয়। update() মেথড D3.js দ্বারা স্বয়ংক্রিয়ভাবে পরিচালিত হয়, এবং এটি DOM-এ আগে থেকে থাকা উপাদানগুলির মান পরিবর্তন করে।
exit() মেথড
যখন ডেটার আকার কমে যায় বা কোনো উপাদান অতিরিক্ত হয়ে যায়, তখন exit() মেথড সেই DOM উপাদানটি মুছে ফেলে।
উদাহরণ:
const data = [100, 200, 300]; // নতুন ডেটাসেট
const svg = d3.select("svg");
// DOM আপডেট
svg.selectAll("rect")
.data(data)
.style("height", d => d);
// অতিরিক্ত DOM উপাদান অপসারণ
svg.selectAll("rect")
.data(data)
.exit()
.remove();
এখানে:
style("height", d => d): বিদ্যমানrectউপাদানগুলির উচ্চতা আপডেট হচ্ছে।exit().remove(): অতিরিক্তrectউপাদান মুছে ফেলা হচ্ছে।
৫. ডেটা বাইন্ডিং এবং ইন্টারঅ্যাকশন
D3.js-এ ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি ডেটা পরিবর্তন করার জন্য ইন্টারঅ্যাকশন যোগ করতে পারেন, যেমন মাউস ক্লিক বা হোভার ইভেন্টের মাধ্যমে ডেটা পরিবর্তন।
উদাহরণ:
// ডেটাসেট
const data = [50, 100, 150, 200, 250];
// 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")
.on("click", function(event, d) {
d3.select(this).style("fill", "orange");
alert("You clicked on bar with value: " + d);
});
এখানে, on("click") ইভেন্টের মাধ্যমে যখন ব্যবহারকারী বারটি ক্লিক করবে, তখন তার রঙ পরিবর্তিত হবে এবং একটি এলার্ট প্রদর্শিত হবে।
ডেটা বাইন্ডিং D3.js-এ একটি মৌলিক এবং অত্যন্ত শক্তিশালী ধারণা, যা ডেটা ও DOM উপাদানগুলির মধ্যে সংযোগ তৈরি করে। enter(), update(), এবং exit() মেথডের মাধ্যমে ডেটা ভিত্তিক DOM উপাদান তৈরি, আপডেট এবং মুছে ফেলা সম্ভব। এটি ডেটা ভিজ্যুয়ালাইজেশন তৈরি এবং পরিবর্তন করার জন্য অত্যন্ত নমনীয় এবং শক্তিশালী উপায় সরবরাহ করে।
D3.js-এ enter(), update(), এবং exit() মেথডগুলি ডেটা বাইন্ডিং এবং DOM ম্যানিপুলেশন এর ক্ষেত্রে একটি অত্যন্ত গুরুত্বপূর্ণ প্যাটার্ন। এই তিনটি মেথড ডেটার উপর ভিত্তি করে DOM উপাদান তৈরি, আপডেট এবং মুছে ফেলার জন্য ব্যবহৃত হয়। এই প্যাটার্নটি D3.js-এ enter-update-exit মডেল হিসেবে পরিচিত এবং এটি ডেটার পরিবর্তন অনুযায়ী DOM ম্যানিপুলেশন পরিচালনা করে।
১. enter() মেথড
enter() মেথডটি ডেটা বাইন্ডিং প্রক্রিয়ায় নতুন DOM উপাদান তৈরি করতে ব্যবহৃত হয়। যখন ডেটাসেটে নতুন উপাদান যোগ করা হয়, তখন enter() মেথড নতুন DOM উপাদান (যেমন div, svg, rect, ইত্যাদি) তৈরি করার জন্য ব্যবহৃত হয়।
সিম্পল সিনট্যাক্স:
selection.enter().append("element");
উদাহরণ:
const data = [10, 20, 30];
// SVG তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
// ডেটা বাইন্ডিং এবং নতুন DOM উপাদান তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d)
.attr("x", (d, i) => i * 60)
.attr("y", d => 300 - d)
.style("fill", "steelblue");
ব্যাখ্যা:
- এখানে
enter()মেথড নতুনrectউপাদান তৈরি করে এবং তা প্রতিটি ডেটার জন্যwidth,height,x, এবংyঅ্যাট্রিবিউট নির্ধারণ করে। enter()মেথডের মাধ্যমে প্রতিটি ডেটা ভ্যালু জন্য নতুনrect(চতুর্ভুজ) উপাদান তৈরি হচ্ছে।
২. update() মেথড
update() মেথডটি সেই DOM উপাদানগুলো আপডেট করতে ব্যবহৃত হয় যেগুলো পূর্বে DOM-এ ছিল এবং নতুন ডেটা সাথে মেলে। update() মূলত সেই DOM উপাদানগুলোকে আপডেট করার কাজ করে যেগুলোর জন্য নতুন ডেটা রয়েছে।
সিম্পল সিনট্যাক্স:
selection
.data(newData)
.attr("attribute", value);
উদাহরণ:
const newData = [150, 250, 350];
// SVG-এর ভিতরে existing rect উপাদান আপডেট করা
svg.selectAll("rect")
.data(newData)
.attr("height", d => d)
.attr("y", d => 300 - d);
ব্যাখ্যা:
- এখানে
update()মেথডের মাধ্যমে, নতুন ডেটার সাথে মেলে এমনrectউপাদানগুলো আপডেট করা হয়েছে। - ডেটার মান পরিবর্তন হলে, সেই অনুযায়ী বারের উচ্চতা (
height) এবং অবস্থান (y) পরিবর্তিত হচ্ছে।
৩. exit() মেথড
exit() মেথডটি সেই DOM উপাদানগুলো মুছে ফেলার জন্য ব্যবহৃত হয় যেগুলোর জন্য ডেটা আর নেই। অর্থাৎ, যখন ডেটা থেকে কোনো উপাদান বাদ পড়ে, তখন exit() মেথড সেই উপাদানগুলো DOM থেকে মুছে ফেলে।
সিম্পল সিনট্যাক্স:
selection.exit().remove();
উদাহরণ:
const data = [10, 20, 30];
// SVG তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
// ডেটা বাইন্ডিং এবং DOM উপাদান তৈরি করা
const rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d)
.attr("x", (d, i) => i * 60)
.attr("y", d => 300 - d)
.style("fill", "steelblue");
// নতুন ডেটা (কম ডেটা) সেট করা
const newData = [150, 250];
// ডেটা আপডেট করা এবং পুরনো DOM উপাদান মুছে ফেলা
svg.selectAll("rect")
.data(newData)
.exit()
.remove();
ব্যাখ্যা:
- প্রথমে ৩টি
rectউপাদান তৈরি করা হয়। - পরে, নতুন ডেটা প্রদান করা হলে (যেমন [150, 250]),
exit()মেথড ব্যবহার করে অতিরিক্তrectউপাদানগুলো মুছে ফেলা হয়েছে। - এর ফলে, শুধুমাত্র নতুন ডেটার জন্য উপাদানগুলো থাকবে এবং পুরানো (অপ্রয়োজনীয়) উপাদানগুলো DOM থেকে সরিয়ে ফেলা হবে।
enter(), update(), এবং exit() এর একত্রিত ব্যবহার
এই তিনটি মেথডকে একসাথে ব্যবহার করলে ডেটা পরিবর্তন অনুযায়ী DOM উপাদানগুলোর আপডেট, তৈরি এবং মুছে ফেলা সহজে করা যায়। এটি একটি শক্তিশালী প্যাটার্ন যেটি ডেটা-ড্রিভেন ডায়নামিক ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে।
উদাহরণ:
const data = [10, 20, 30, 40, 50];
const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 300);
// ডেটা বাইন্ডিং এবং DOM উপাদান তৈরি, আপডেট এবং মুছে ফেলা
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d)
.attr("x", (d, i) => i * 60)
.attr("y", d => 300 - d)
.style("fill", "steelblue")
.merge(svg.selectAll("rect")) // এটি update() এর মতো কাজ করবে
.attr("height", d => d)
.attr("y", d => 300 - d);
const newData = [150, 250, 350];
// নতুন ডেটা সেট করা এবং পুরনো ডোম উপাদান মুছে ফেলা
svg.selectAll("rect")
.data(newData)
.exit()
.remove();
ব্যাখ্যা:
- প্রথমে
enter()মেথডের মাধ্যমে নতুনrectউপাদান তৈরি করা হয়। - পরে,
update()অংশ (যেটি.merge()এর মাধ্যমে সম্পন্ন হয়েছে) বিদ্যমান DOM উপাদানগুলো আপডেট করবে। - অবশেষে,
exit()মেথড পুরনো (অপ্রয়োজনীয়) উপাদানগুলো মুছে ফেলে।
D3.js-এ enter(), update(), এবং exit() মেথডগুলো ডেটা-ড্রিভেন DOM ম্যানিপুলেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলো ডেটার ভিত্তিতে নতুন DOM উপাদান তৈরি, বিদ্যমান উপাদান আপডেট এবং অপ্রয়োজনীয় উপাদান মুছে ফেলার কাজ করে, যা ডেটার পরিবর্তন অনুযায়ী ভিজ্যুয়ালাইজেশন তৈরি এবং আপডেট করতে সহায়ক।
Read more
