DC.js এর Legend বা লেজেন্ড চার্টের বিভিন্ন সিরিজ বা গ্রুপের নাম প্রদর্শন করার জন্য ব্যবহৃত হয়। সাধারণত, লেজেন্ডের মাধ্যমে ব্যবহারকারীরা চার্টের বিভিন্ন সিরিজের মধ্যে পার্থক্য বুঝতে পারেন। এখানে, আমরা Custom Legend Styling এবং Legend Interaction এর মাধ্যমে লেজেন্ড কাস্টমাইজ এবং ইন্টারঅ্যাকশন তৈরি করার প্রক্রিয়া দেখব।
১. Custom Legend Styling
DC.js ব্যবহার করে লেজেন্ডের স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি CSS ব্যবহার করে লেজেন্ডের রঙ, আকার, টাইপ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।
উদাহরণ: Custom Legend Styling (লেজেন্ড কাস্টমাইজেশন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Custom Legend Styling</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">
<style>
/* Custom legend styling */
.dc-legend-item {
font-size: 14px;
font-weight: bold;
color: #34495e;
display: flex;
align-items: center;
margin-right: 10px;
}
.dc-legend-item .legend-symbol {
width: 20px;
height: 20px;
margin-right: 5px;
}
.dc-legend-item .legend-symbol.circle {
border-radius: 50%;
}
.dc-legend-item .legend-symbol.square {
background-color: #3498db;
}
.dc-legend-item .legend-text {
font-size: 12px;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Custom Legend Styling with DC.js</h1>
<div id="chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "A", value: 70 },
{ category: "C", value: 90 },
{ category: "B", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value");
// লেজেন্ড কাস্টমাইজেশন
barChart.legend(dc.legend())
.itemHeight(20) // লেজেন্ড আইটেমের উচ্চতা
.gap(5) // আইটেমগুলির মধ্যে ব্যবধান
.horizontal(true) // লেজেন্ড অনুভূমিকভাবে প্রদর্শন
.setCustomLegend(function (chart) {
return chart.legend().item().selectAll('.dc-legend-item')
.style('font-size', '16px') // কাস্টম ফন্ট সাইজ
.style('font-weight', 'bold') // কাস্টম ফন্ট ওয়েট
.style('color', '#2c3e50'); // কাস্টম টেক্সট কালার
});
dc.renderAll();
</script>
</body>
</html>
কাস্টম লেজেন্ড স্টাইলিং ব্যাখ্যা:
- CSS ক্লাস:
.dc-legend-item,.legend-symbol,.legend-textইত্যাদি ব্যবহার করে লেজেন্ডের আইটেম, সিম্বল এবং টেক্সট কাস্টমাইজ করা হয়েছে। - লেজেন্ড সিম্বল:
.legend-symbol.circleএবং.legend-symbol.squareক্লাস ব্যবহার করে লেজেন্ড সিম্বলের আকার এবং রঙ নির্ধারণ করা হয়েছে। - লেজেন্ডের ফন্ট:
font-size,font-weight, এবংcolorপ্রপার্টি দিয়ে লেজেন্ডের টেক্সটের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।
২. Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)
DC.js এ লেজেন্ডের সাথে ইন্টারঅ্যাকশন যোগ করা যায়। এর মাধ্যমে ব্যবহারকারীরা লেজেন্ডের মাধ্যমে সিরিজগুলো সিলেক্ট বা ডিসিলেক্ট করতে পারেন, যা চার্টের ডেটা পরিবর্তন করে।
উদাহরণ: Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Legend Interaction</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>Legend Interaction with DC.js</h1>
<div id="interactive-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "A", value: 70 },
{ category: "C", value: 90 },
{ category: "B", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#interactive-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value");
// লেজেন্ড ইন্টারঅ্যাকশন
barChart.legend(dc.legend())
.itemHeight(20)
.gap(5)
.horizontal(true)
.highlightSelected(true) // সিলেক্ট করা আইটেম হাইলাইট করা
.toggleable(true); // লেজেন্ডের মাধ্যমে সিরিজ টগল (on/off) করা
dc.renderAll();
</script>
</body>
</html>
লেজেন্ড ইন্টারঅ্যাকশন ব্যাখ্যা:
- toggleable(true): এই অপশনটি দিয়ে লেজেন্ডে ক্লিক করলে সিরিজটি টগল হবে, অর্থাৎ এটি অ্যাকটিভ বা ডিএ্যাকটিভ করা যাবে।
- highlightSelected(true): যখন লেজেন্ডের কোন আইটেমে ক্লিক করা হবে, তখন সেটি হাইলাইট হবে এবং কেবল সেই সিরিজের ডেটা প্রদর্শিত হবে।
৩. আরও কাস্টম স্টাইলিং এবং ইন্টারঅ্যাকশন
- লেজেন্ডের টেক্সট এবং রঙ পরিবর্তন:
.itemText()এবং.itemColor()ব্যবহার করে লেজেন্ডের টেক্সট এবং রঙ কাস্টমাইজ করা যায়। - গ্রেডিয়েন্ট বা ইমেজ ব্যবহার: লেজেন্ড আইটেমের জন্য গ্রেডিয়েন্ট বা কাস্টম ইমেজ ব্যবহার করতে পারেন।
সারাংশ
- Custom Legend Styling: DC.js দিয়ে লেজেন্ডের স্টাইল সহজে কাস্টমাইজ করা যায় CSS এর মাধ্যমে, যেমন ফন্ট সাইজ, রঙ, এবং সিম্বল আকার।
- Legend Interaction:
toggleable(true)এবংhighlightSelected(true)ব্যবহার করে লেজেন্ডের মাধ্যমে ইন্টারঅ্যাকশন তৈরি করা যায়, যাতে ব্যবহারকারীরা সিরিজ সিলেক্ট বা ডিসিলেক্ট করতে পারেন।
এই কাস্টম লেজেন্ড স্টাইলিং এবং ইন্টারঅ্যাকশন DC.js এর ভিজ্যুয়ালাইজেশনগুলিকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য উপযোগী করে তোলে।
Content added By
Read more
