enter(), update(), এবং exit() মেথড

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 উপাদান তৈরি, বিদ্যমান উপাদান আপডেট এবং অপ্রয়োজনীয় উপাদান মুছে ফেলার কাজ করে, যা ডেটার পরিবর্তন অনুযায়ী ভিজ্যুয়ালাইজেশন তৈরি এবং আপডেট করতে সহায়ক।