SVG Attributes এবং Styles

D3.js একটি শক্তিশালী লাইব্রেরি যা SVG (Scalable Vector Graphics) এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। SVG হল একটি XML ভিত্তিক ফরম্যাট যা গ্রাফিক্স এবং চিত্র তৈরিতে ব্যবহৃত হয় এবং D3.js ব্যবহার করে ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা হয়। D3.js-এর মাধ্যমে SVG উপাদানগুলির Attributes এবং Styles পরিবর্তন এবং নিয়ন্ত্রণ করা যায়।

১. SVG Attributes

SVG উপাদানগুলির বিভিন্ন Attributes (অ্যাট্রিবিউট) থাকে যা তাদের বৈশিষ্ট্য এবং আচরণ নির্ধারণ করে। D3.js ব্যবহার করে এই অ্যাট্রিবিউটগুলো নিয়ন্ত্রণ করা সম্ভব। সাধারণত, অ্যাট্রিবিউটের মাধ্যমে আকার, স্থান, রঙ, এবং অন্যান্য প্রপার্টি নির্ধারণ করা হয়।

১.১ SVG Attributes পরিবর্তন

D3.js-এ attr() মেথড ব্যবহার করে SVG উপাদানগুলির অ্যাট্রিবিউট পরিবর্তন করা যায়।

সিনট্যাক্স:

d3.select("element").attr("attribute", value);

উদাহরণ:

// একটি circle তৈরি এবং তার রেডিয়াস (radius) এবং পজিশন (cx, cy) সেট করা
d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("circle")
  .attr("cx", 200)
  .attr("cy", 200)
  .attr("r", 50)
  .attr("fill", "steelblue");

এই কোডটি একটি SVG এর মধ্যে একটি circle তৈরি করবে এবং তার পজিশন এবং আকার নির্ধারণ করবে।

Attributes উদাহরণ:

• width: SVG বা উপাদানের প্রস্থ।
• height: SVG বা উপাদানের উচ্চতা।
• x, y: উপাদানটির অবস্থান।
• r: বৃত্তের রেডিয়াস।
• cx, cy: বৃত্তের কেন্দ্রের অবস্থান।
• fill: উপাদানের ভিতরের রঙ।
• stroke: উপাদানের সীমানা রঙ।
• stroke-width: সীমানার প্রস্থ।

২. SVG Styles

SVG উপাদানগুলির Styles পরিবর্তন করতে style() মেথড ব্যবহার করা হয়। style() মেথড ব্যবহার করে CSS স্টাইল শীটের মতো সরাসরি স্টাইল অ্যাট্রিবিউট যোগ করা হয়।

২.১ Styles পরিবর্তন

সিনট্যাক্স:

d3.select("element").style("property", value);

উদাহরণ:

// একটি rect তৈরি এবং তার স্টাইল পরিবর্তন করা
d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 200)
  .attr("height", 100)
  .style("fill", "orange")
  .style("stroke", "black")
  .style("stroke-width", 3);

এই কোডটি একটি rect তৈরি করবে এবং তার স্টাইল যেমন রঙ, সীমানা রঙ এবং সীমানা প্রস্থ নির্ধারণ করবে।

Styles উদাহরণ:

• fill: উপাদানের ভিতরের রঙ।
• stroke: উপাদানের সীমানা রঙ।
• stroke-width: সীমানার প্রস্থ।
• opacity: উপাদানের অস্বচ্ছতা (ট্রান্সপারেন্সি)।
• font-size: টেক্সটের আকার।
• font-family: টেক্সটের ফন্ট।
• border: সীমানা।

৩. D3.js-এ SVG Attributes এবং Styles ব্যবহার

D3.js-এর মাধ্যমে SVG উপাদানগুলির Attributes এবং Styles-এর সমন্বয় ব্যবহার করে আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

উদাহরণ: ডেটা-ভিত্তিক বার চার্ট

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 30)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .style("stroke", "black")
   .style("stroke-width", 2);

এই কোডটি একটি SVG এর মধ্যে বার চার্ট তৈরি করবে, যেখানে:

• x এবং y দ্বারা বারগুলির পজিশন নির্ধারণ করা হবে।
• width এবং height দ্বারা বারগুলির আকার নির্ধারণ করা হবে।
• fill দ্বারা বারের ভিতরের রঙ এবং stroke দ্বারা সীমানার রঙ নির্ধারণ করা হবে।

৪. D3.js-এ Interaction এবং Styles

D3.js ব্যবহার করে ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা যেতে পারে, যেখানে mouse events বা hover effects ব্যবহার করা হয়।

উদাহরণ: Hover Effects

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 30)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .style("stroke", "black")
   .style("stroke-width", 2)
   .on("mouseover", function(event, d) {
       d3.select(this)
         .style("fill", "orange");
   })
   .on("mouseout", function(event, d) {
       d3.select(this)
         .style("fill", "steelblue");
   });

এটি একটি ইন্টারঅ্যাকটিভ বার চার্ট তৈরি করবে, যেখানে মাউসওভার করলে বারটির রঙ পরিবর্তিত হবে এবং মাউস আউট করলে আবার আগের রঙ ফিরে আসবে।

D3.js-এ SVG Attributes এবং Styles পরিবর্তন এবং নিয়ন্ত্রণের মাধ্যমে শক্তিশালী, কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব। attr() এবং style() মেথড ব্যবহার করে SVG উপাদানের বৈশিষ্ট্য এবং চেহারা পরিবর্তন করা যায়, যা ডেটা-ভিত্তিক ভিজ্যুয়ালাইজেশন তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ।