DC.js এর মাধ্যমে বার চার্ট তৈরি করার সময়, আপনি বারটির প্রস্থ, স্পেসিং, এবং প্যাডিং কাস্টমাইজ করতে পারবেন। D3.js এর সাথে ইন্টিগ্রেশন থাকার কারণে, আপনি এই বিভিন্ন প্যারামিটার নিয়ন্ত্রণ করতে পারেন।
এখানে Bar Width, Spacing, এবং Padding কাস্টমাইজ করার জন্য প্রয়োজনীয় কোড এবং ধারণা তুলে ধরা হচ্ছে।
১. Bar Width কাস্টমাইজ করা
Bar Width কাস্টমাইজ করতে, আপনি x.bandwidth() বা x.rangeBand() ব্যবহার করতে পারেন। এখানে bandwidth() বারটির প্রস্থ নিয়ন্ত্রণ করে, এবং এটি সাধারণত scaleBand() এর মাধ্যমে সেট করা হয়।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Values")
.barPadding(0.1) // বারটির মধ্যে স্পেসিং
.outerPadding(0.1) // গ্রাফের বাইরের প্যাডিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এই উদাহরণে barPadding() এবং outerPadding() ব্যবহৃত হয়েছে। barPadding() বারগুলোর মধ্যে স্পেসিং নিয়ন্ত্রণ করে, এবং outerPadding() পুরো চার্টের বাইরের স্পেসিং নিয়ন্ত্রণ করে।
২. Spacing (স্পেসিং) কাস্টমাইজ করা
Spacing বা গ্যাপ কাস্টমাইজ করার জন্য barPadding() এবং outerPadding() ব্যবহার করা হয়। barPadding() বারগুলোর মধ্যে স্পেসিং বাড়ানোর বা কমানোর জন্য ব্যবহৃত হয়, এবং outerPadding() চার্টের বাইরের অংশের প্যাডিং নিয়ন্ত্রণ করে।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.1) // বারগুলোর মধ্যে স্পেসিং
.outerPadding(0.05) // চার্টের বাইরের স্পেসিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এখানে:
- barPadding(0.1): বারগুলোর মধ্যে 10% স্পেসিং রাখবে।
- outerPadding(0.05): চার্টের বাইরের প্রান্তের জন্য 5% স্পেসিং থাকবে।
৩. Padding কাস্টমাইজ করা
Padding কাস্টমাইজ করতে barPadding() এবং outerPadding() এর মান পরিবর্তন করতে হবে। barPadding() বারগুলোর মধ্যে স্পেসিং নির্ধারণ করে এবং outerPadding() পুরো চার্টের বাইরের স্পেসিং নির্ধারণ করে।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.2) // বারগুলোর মধ্যে 20% স্পেসিং
.outerPadding(0.1) // বাইরের প্রান্তে 10% স্পেসিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এখানে barPadding(0.2) এবং outerPadding(0.1) বারগুলোর মধ্যে এবং বাইরের প্রান্তে স্পেসিং বাড়ানোর জন্য ব্যবহার করা হয়েছে।
৪. পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js Bar Chart Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট কাস্টমাইজেশন
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.2) // বারগুলোর মধ্যে স্পেসিং
.outerPadding(0.1) // বাইরের প্রান্তে স্পেসিং
.xAxisLabel("Categories")
.yAxisLabel("Values");
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৫. কাস্টমাইজেশন সংক্ষিপ্ত রিভিউ
barPadding(): বারগুলোর মধ্যে স্পেসিং কাস্টমাইজ করে।outerPadding(): চার্টের বাইরের প্রান্তের স্পেসিং কাস্টমাইজ করে।x.bandwidth(): বারটির প্রস্থ নির্ধারণে সহায়ক (যখনscaleBand()ব্যবহৃত হয়)।
সারাংশ
DC.js এর মাধ্যমে আপনি বার চার্টে bar width, spacing, এবং padding সহজেই কাস্টমাইজ করতে পারেন। barPadding() এবং outerPadding() ফাংশনগুলি ব্যবহার করে আপনি বারগুলোর মধ্যে এবং বাইরের স্পেসিং নিয়ন্ত্রণ করতে পারবেন। bandwidth() ব্যবহার করে বারটির প্রস্থ কাস্টমাইজ করা যায়, যা আপনার চার্টকে আরও উপযোগী এবং আকর্ষণীয় করে তোলে।
Read more
