HTML Element এর সাথে Data Bind করা

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

এটি সাধারণত ডেটা-ড্রিভেন (data-driven) DOM ম্যানিপুলেশন এবং ভিজ্যুয়ালাইজেশন তৈরির জন্য ব্যবহৃত হয়।

ডেটা বাইন্ডিং কিভাবে কাজ করে?

D3.js-এ ডেটা বাইন্ডিং প্রক্রিয়া দুটি প্রধান পর্যায়ে ঘটে:

1. ডেটা যোগ করা (data()): এটি একটি ডেটা সেটকে DOM উপাদানগুলির সাথে যুক্ত করে।
2. DOM উপাদান তৈরি করা বা আপডেট করা (enter(), append(), update()): ডেটার উপর ভিত্তি করে নতুন DOM উপাদান তৈরি করা বা পুরানো DOM উপাদান আপডেট করা।

ডেটা বাইন্ডিং উদাহরণ

ধরা যাক, আমাদের একটি সিম্পল ডেটা সেট রয়েছে এবং আমরা সেই ডেটা সেটটি HTML div এলিমেন্টগুলির সাথে যুক্ত করতে চাই।

উদাহরণ: ডেটা বাইন্ডিং ব্যবহার করে HTML উপাদান তৈরি

// ডেটাসেট
const data = [30, 70, 110, 150, 200];

// HTML ক্যানভাস তৈরি
const container = d3.select("body").append("div")
                   .attr("class", "container");

// ডেটা বাইন্ডিং
container.selectAll("div")
         .data(data)
         .enter()
         .append("div")
         .style("width", d => d + "px")  // ডেটার উপর ভিত্তি করে প্রস্থ নির্ধারণ
         .style("height", "30px")
         .style("background-color", "steelblue")
         .style("margin", "5px")
         .text(d => "Value: " + d);  // ডেটা মানের সাথে টেক্সট

এখানে:

• data(data) মেথডটি ডেটা সেটটিকে DOM উপাদানের সাথে যুক্ত করে।
• enter() মেথডটি ডেটার জন্য নতুন div এলিমেন্ট তৈরি করে।
• style() মেথডের মাধ্যমে প্রতিটি div এর প্রস্থ, উচ্চতা, রঙ ইত্যাদি সেট করা হয় ডেটার মান অনুযায়ী।

ডেটা আপডেট এবং রিমুভ করা

D3.js এ ডেটা আপডেট বা ডেটা রিমুভ করার জন্য update() এবং exit() মেথডও ব্যবহার করা হয়।

উদাহরণ: ডেটা আপডেট এবং রিমুভ

// নতুন ডেটাসেট
const newData = [50, 90, 120, 180, 250];

// ডেটা বাইন্ডিং এবং আপডেট
container.selectAll("div")
         .data(newData)  // নতুন ডেটা সেট
         .style("width", d => d + "px")  // নতুন প্রস্থ
         .style("background-color", "orange")
         .text(d => "Updated Value: " + d);  // নতুন টেক্সট

// পুরানো ডেটা রিমুভ করা
container.selectAll("div")
         .data(newData)
         .exit()
         .remove();  // নতুন ডেটা বাইন্ডিং এর সাথে পুরানো ডেটা অপসারণ

এখানে:

• data(newData) নতুন ডেটা সেট ব্যবহার করছে।
• exit().remove() পুরানো, অব্যবহৃত ডেটা উপাদানগুলোকে DOM থেকে সরিয়ে দিচ্ছে।

ডেটা বাইন্ডিং ব্যবহার করে ইনপুট ফর্ম উপাদান তৈরি

D3.js ডেটা বাইন্ডিংয়ের মাধ্যমে ফর্ম উপাদানও তৈরি করা যায়। উদাহরণস্বরূপ, ইনপুট ফিল্ডগুলি তৈরি করে, যেখানে ব্যবহারকারীরা ডেটা প্রবেশ করতে পারেন।

উদাহরণ: ইনপুট ফর্মের সাথে ডেটা বাইন্ডিং

// ডেটাসেট
const data = ["Alice", "Bob", "Charlie", "David"];

// HTML ক্যানভাস তৈরি
const formContainer = d3.select("body").append("div")
                        .attr("class", "form-container");

// ডেটা বাইন্ডিং ব্যবহার করে ইনপুট তৈরি
formContainer.selectAll("input")
             .data(data)
             .enter()
             .append("input")
             .attr("type", "text")
             .attr("value", d => d)  // ডেটার মান ইনপুট ফিল্ডে প্রদর্শন
             .style("margin", "5px")
             .on("input", function(event, d) {
                 d3.select(this).style("background-color", "lightgreen");  // ইনপুট পরিবর্তন হলে রঙ পরিবর্তন
             });

এখানে:

• data(data) ইনপুট ফিল্ডগুলির সাথে ডেটা সেট বাইন্ড করছে।
• on("input", ...) ইভেন্ট হ্যান্ডলার ইনপুট পরিবর্তনের সময় একটি পরিবর্তন ঘটানোর জন্য ব্যবহৃত হচ্ছে।

D3.js এর মাধ্যমে ডেটা বাইন্ডিং খুবই শক্তিশালী একটি কৌশল, যা HTML DOM উপাদানগুলির সাথে ডেটা যুক্ত করে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। data() মেথডের সাহায্যে ডেটা এবং DOM উপাদানগুলিকে সংযুক্ত করা যায় এবং enter(), exit(), update() এর মাধ্যমে DOM-এ পরিবর্তন ঘটানো যায়। D3.js এর এই ক্ষমতা ডেটা-ড্রিভেন UI তৈরির ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।