এক্সেস ফাংশন তৈরি (d.x, d.y)

D3.js-এর এক্সেস ফাংশন তৈরি করার মাধ্যমে আপনি ডেটার প্রতিটি উপাদানের জন্য নির্দিষ্ট বৈশিষ্ট্য বা অ্যাট্রিবিউট (যেমন x, y, width, height) অ্যাক্সেস করতে পারেন। এই ফাংশনগুলি সাধারণত ডেটা বাইন্ডিং এবং DOM উপাদান তৈরি বা আপডেট করার সময় ব্যবহৃত হয়। সাধারণত, D3.js-এ এক্সেস ফাংশনগুলি d.x, d.y বা অন্যান্য ডেটা বৈশিষ্ট্য হিসেবে ব্যবহৃত হয়, যেখানে d প্রতিটি ডেটা আইটেমকে বোঝায়।

এক্সেস ফাংশন কি?

এক্সেস ফাংশন হলো ডেটার নির্দিষ্ট বৈশিষ্ট্য বা মানে অ্যাক্সেস করার জন্য ব্যবহৃত ফাংশন। এটি ডেটা বাইন্ডিংয়ের সময় প্রতিটি উপাদানের জন্য একটি ফাংশন রিটার্ন করে, যা DOM-এর সংশ্লিষ্ট উপাদানগুলির গুণগত বৈশিষ্ট্য বা মান নির্ধারণ করতে সাহায্য করে।

উদাহরণস্বরূপ, যদি আপনি একটি ডেটা সেট ব্যবহার করেন যার মধ্যে প্রতিটি উপাদানের x এবং y বৈশিষ্ট্য থাকে, তবে d.x এবং d.y এই মানগুলির জন্য এক্সেস ফাংশন হিসেবে ব্যবহার করা হবে।

উদাহরণ: ডেটার সাথে x এবং y এক্সেস ফাংশন

ধরা যাক, আপনি একটি ডেটা সেট ব্যবহার করছেন যা বিভিন্ন পয়েন্টের জন্য x এবং y কোঅর্ডিনেট ধারণ করে। আপনি D3.js ব্যবহার করে একটি পয়েন্ট প্লট তৈরি করতে চান, যেখানে প্রতিটি পয়েন্টের অবস্থান ডেটার x এবং y বৈশিষ্ট্য অনুযায়ী নির্ধারিত হবে।

ডেটা:

const data = [
  { x: 30, y: 40 },
  { x: 70, y: 80 },
  { x: 110, y: 120 },
  { x: 150, y: 160 }
];

D3.js কোড:

// SVG তৈরি
const svg = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);

// ডেটার উপর ভিত্তি করে circles তৈরি
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)  // x অবস্থান
  .attr("cy", d => d.y)  // y অবস্থান
  .attr("r", 5)          // ব্যাসার্ধ
  .style("fill", "steelblue");

এখানে:

• d.x এবং d.y ডেটার প্রতিটি আইটেমের x এবং y মান অনুযায়ী সিলেক্ট করা হচ্ছে।
• cx এবং cy অ্যাট্রিবিউটগুলির মাধ্যমে প্রতিটি circle এর অবস্থান নির্ধারণ করা হচ্ছে।

এই কোডের ফলস্বরূপ একটি SVG তৈরি হবে, যেখানে প্রতিটি পয়েন্টের জন্য একটি circle তৈরি হবে এবং তার অবস্থান হবে x এবং y মান অনুযায়ী।

আরও উদাহরণ: ডেটা বাইন্ডিং এবং এক্সেস ফাংশন

ধরা যাক, আপনি একটি বারের উচ্চতা নির্ধারণ করতে চান, যেখানে height মানটি ডেটার value অ্যাট্রিবিউটের উপর ভিত্তি করে হবে।

ডেটা:

const data = [
  { name: "A", value: 30 },
  { name: "B", value: 80 },
  { name: "C", value: 45 },
  { name: "D", value: 60 }
];

D3.js কোড:

// SVG তৈরি
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 200);

// বার চার্ট তৈরি
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 40)
  .attr("height", d => d.value)  // bar height based on value
  .attr("x", (d, i) => i * 50)   // x position based on index
  .attr("y", d => 200 - d.value) // y position (flip bar direction)
  .style("fill", "steelblue");

এখানে:

• d.value ডেটার value ফিল্ডের মান ব্যবহার করে বার চার্টের উচ্চতা নির্ধারণ করা হচ্ছে।
• height, x, এবং y অ্যাট্রিবিউটগুলির মাধ্যমে প্রতিটি rect (বর্গাকার উপাদান) এর অবস্থান এবং আকার নির্ধারণ করা হচ্ছে।

এক্সেস ফাংশন ব্যবহার করে আরও কাস্টমাইজেশন

D3.js-এ এক্সেস ফাংশন ব্যবহার করে আপনি DOM উপাদানের আকার, অবস্থান, রঙ এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:

এক্সেস ফাংশন দ্বারা বার রঙ পরিবর্তন:

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 40)
  .attr("height", d => d.value)
  .attr("x", (d, i) => i * 50)
  .attr("y", d => 200 - d.value)
  .style("fill", d => d.value > 50 ? "green" : "red"); // value এর ওপর ভিত্তি করে রঙ

এখানে, d.value ব্যবহার করে প্রতিটি বারটির রঙ পরিবর্তন করা হচ্ছে। যদি value ৫০-এর বেশি হয়, তবে রঙ হবে সবুজ, নাহলে রঙ হবে লাল।

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