D3.js এর মাধ্যমে SVG (Scalable Vector Graphics) ব্যবহার করে বিভিন্ন ধরনের শেপ তৈরি করা সম্ভব। D3.js-এর select(), append(), এবং attr() মেথডের মাধ্যমে আমরা SVG উপাদানগুলো যেমন লাইন, বৃত্ত, আয়তক্ষেত্র ইত্যাদি তৈরি এবং ম্যানিপুলেট করতে পারি।
১. SVG এর মাধ্যমে লাইন তৈরি (Line)
লম্বা বা সোজা লাইন তৈরি করার জন্য line এলিমেন্ট ব্যবহৃত হয়। D3.js-এ লাইন তৈরি করতে append("line") মেথড ব্যবহার করা হয় এবং এর জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন x1, y1, x2, এবং y2 দেওয়া হয়।
উদাহরণ:
// SVG তৈরি
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// লাইন তৈরি
svg.append("line")
.attr("x1", 50)
.attr("y1", 50)
.attr("x2", 450)
.attr("y2", 450)
.attr("stroke", "black")
.attr("stroke-width", 2);
এটি করবে:
- 50, 50 থেকে 450, 450 পজিশনে একটি সোজা লাইন আঁকবে।
- লাইনটি কালো রঙের এবং ২ পিক্সেল চওড়া হবে।
২. SVG এর মাধ্যমে বৃত্ত তৈরি (Circle)
বৃত্ত তৈরি করতে circle এলিমেন্ট ব্যবহার করা হয়। D3.js-এ বৃত্ত আঁকতে append("circle") মেথড ব্যবহার করা হয় এবং তার জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন cx, cy, এবং r সেট করা হয়।
উদাহরণ:
// SVG তৈরি
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// বৃত্ত তৈরি
svg.append("circle")
.attr("cx", 250)
.attr("cy", 250)
.attr("r", 100)
.attr("fill", "steelblue");
এটি করবে:
- 250, 250 পজিশনে একটি বৃত্ত তৈরি করবে যার ব্যাসার্ধ 100 পিক্সেল এবং এটি
steelblueরঙে পূর্ণ হবে।
৩. SVG এর মাধ্যমে আয়তক্ষেত্র তৈরি (Rectangle)
আয়তক্ষেত্র তৈরি করতে rect এলিমেন্ট ব্যবহার করা হয়। D3.js-এ আয়তক্ষেত্র আঁকতে append("rect") মেথড ব্যবহার করা হয় এবং এর জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন x, y, width, এবং height নির্ধারণ করা হয়।
উদাহরণ:
// SVG তৈরি
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// আয়তক্ষেত্র তৈরি
svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 300)
.attr("height", 200)
.attr("fill", "orange");
এটি করবে:
- 100, 100 পজিশনে একটি আয়তক্ষেত্র তৈরি করবে যার প্রস্থ 300 পিক্সেল এবং উচ্চতা 200 পিক্সেল। এটি
orangeরঙে পূর্ণ হবে।
৪. একাধিক শেপ তৈরি (Multiple Shapes)
D3.js ব্যবহার করে একাধিক শেপ তৈরি করা যেতে পারে। আপনি যদি ডেটা ব্যবহার করে শেপ তৈরি করতে চান, তাহলে data() মেথডের সাহায্যে একাধিক শেপও তৈরি করতে পারেন।
উদাহরণ: একাধিক বৃত্ত তৈরি
// ডেটাসেট
const data = [30, 50, 70, 100, 120];
// SVG তৈরি
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// বৃত্ত তৈরি
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => (i * 100) + 50)
.attr("cy", 250)
.attr("r", d => d)
.attr("fill", "green");
এটি করবে:
- ডেটা অনুযায়ী পাঁচটি বৃত্ত তৈরি করবে, যেখানে প্রতিটি বৃত্তের ব্যাসার্ধ ডেটার মান অনুযায়ী হবে এবং সবগুলো বৃত্ত একই সারিতে থাকবে।
৫. শেপের স্টাইলিং
D3.js-এ শেপগুলোকে স্টাইল করার জন্য style() মেথড ব্যবহার করা যায়। এছাড়াও attr() মেথডের মাধ্যমে অ্যাট্রিবিউটগুলো পরিবর্তন করা যায়।
উদাহরণ: আয়তক্ষেত্রের স্টাইল পরিবর্তন
// SVG তৈরি
const svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// আয়তক্ষেত্র তৈরি এবং স্টাইলিং
svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 300)
.attr("height", 200)
.style("fill", "blue")
.style("stroke", "black")
.style("stroke-width", 5);
এটি করবে:
- আয়তক্ষেত্রের ভিতরের রঙ নীল হবে, বাহিরে সীমানা (স্ট্রোক) কালো এবং ৫ পিক্সেল চওড়া হবে।
D3.js এর মাধ্যমে SVG ব্যবহার করে বিভিন্ন ধরনের শেপ তৈরি এবং ম্যানিপুলেট করা সম্ভব, যেমন লাইন, বৃত্ত, আয়তক্ষেত্র ইত্যাদি। D3.js-এর select(), append(), এবং attr() মেথড ব্যবহার করে এই শেপগুলোর অবস্থান, আকার, রঙ, ইত্যাদি নির্ধারণ করা যায় এবং ডেটা বাইন্ডিংয়ের মাধ্যমে একাধিক শেপও তৈরি করা সম্ভব। D3.js এই শেপগুলির উপর ইন্টারঅ্যাকশন এবং ডাইনামিক পরিবর্তনও সহজে করতে পারে।
