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 অপারেশন সহজে করতে পারেন।
Read more
