Zoom এবং Pan Interaction

ইন্টারঅ্যাকটিভ চার্ট তৈরি - ডি৩জেএস (D3JS) - Web Development

248

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

Zoom Interaction

Zooming হল একটি প্রক্রিয়া যেখানে ব্যবহারকারী একটি ভিজ্যুয়ালাইজেশনে ইনপুটের মাধ্যমে (যেমন মাউস হুইল বা ড্র্যাগ করে) ভিউ স্কেল পরিবর্তন করতে পারে। D3.js-এ zoom ইন্টারঅ্যাকশন তৈরি করার জন্য, d3.zoom() মেথড ব্যবহার করা হয়।

Pan Interaction

Panning হল একটি প্রক্রিয়া যেখানে ব্যবহারকারী ডেটার একটি নির্দিষ্ট অংশের দিকে স্ক্রল বা প্যান করতে পারে। এটি সাধারণত জুম ইন বা আউট করার সময় একসাথে ব্যবহৃত হয়, যাতে ব্যবহারকারী পর্দার এক প্রান্ত থেকে অন্য প্রান্তে স্থানান্তর করতে পারে।

D3.js-এ Zoom এবং Pan Interaction ব্যবহার করা

D3.js-এ Zoom এবং Pan ইন্টারঅ্যাকশন তৈরি করার জন্য, সাধারণত d3.zoom() এবং d3.event.transform ব্যবহার করা হয়। এখানে আমরা একটি সাধারণ উদাহরণ দেখবো যেখানে জুম ইন এবং আউট, এবং প্যানিং করা যাবে।

উদাহরণ: Zoom এবং Pan Interaction

HTML ও CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Zoom and Pan Example</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    svg {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <svg></svg>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const svg = d3.select("svg");
const width = window.innerWidth;
const height = window.innerHeight;

// স্কেলিং ও প্যানিং এর জন্য জুম ফাংশন
const zoom = d3.zoom()
  .scaleExtent([1, 10])  // সর্বনিম্ন এবং সর্বোচ্চ জুম পরিসীমা
  .translateExtent([[0, 0], [width, height]]) // স্ক্রীনের সীমানা নির্ধারণ
  .on("zoom", zoomed); // জুম ইভেন্ট হ্যান্ডলার

// SVG-তে জুম ফাংশন প্রয়োগ
svg.call(zoom);

// ডোম উপাদানগুলি তৈরি
const rects = svg.append("g")
  .selectAll("rect")
  .data([30, 70, 110, 150, 190])
  .enter()
  .append("rect")
  .attr("x", d => d)
  .attr("y", 50)
  .attr("width", 50)
  .attr("height", 100)
  .attr("fill", "steelblue");

// জুম ইভেন্টের জন্য ফাংশন
function zoomed(event) {
  const transform = event.transform; // জুম এবং প্যান ট্রান্সফরমেশন

  // উপাদানগুলির জন্য ট্রান্সফরমেশন প্রয়োগ
  svg.select("g")
     .attr("transform", transform);
}

কোড ব্যাখ্যা:

SVG এলিমেন্ট তৈরি: d3.select("svg") এর মাধ্যমে SVG এলিমেন্ট নির্বাচিত করা হয়, যা পুরো গ্রাফের জন্য বেস কনটেইনার।
Zoom ফাংশন:
- d3.zoom() ব্যবহার করা হয়েছে, যাতে ব্যবহারকারী জুম ইন ও আউট করতে পারেন।
- .scaleExtent([1, 10]) এর মাধ্যমে জুমের পরিসীমা নির্ধারণ করা হয়েছে (এখানে ১x থেকে ১০x পর্যন্ত)।
- .translateExtent([[0, 0], [width, height]]) এর মাধ্যমে স্কেল বা ট্রান্সলেট করার সীমানা নির্ধারণ করা হয়েছে।
Zoom ইভেন্ট: zoom.on("zoom", zoomed) মাধ্যমে জুম ইভেন্ট ট্রিগার করা হয় এবং একটি কাস্টম ফাংশন zoomed তৈরি করা হয় যা স্কেল ও ট্রান্সলেট করে।
প্যানিং: প্যানিং করার জন্য, transform ব্যবহার করা হয়েছে যা জুম ও ট্রান্সলেট প্রয়োগ করবে এবং গ্রাফের উপাদানগুলিকে প্যান করবে।
ডেটা বাইন্ডিং: বার তৈরি করার জন্য data([30, 70, 110, 150, 190]) ব্যবহার করা হয়েছে এবং সেগুলি গ্রাফে রেন্ডার করা হয়েছে।