D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন ধরনের ট্রি ডায়াগ্রাম তৈরি করতে পারেন, যার মধ্যে Radial Tree এবং Collapsible Tree অন্যতম। এই দুইটি ডায়াগ্রাম আপনাকে ডেটার হায়ারার্কি বা গঠনগত সম্পর্ক পরিষ্কারভাবে দেখানোর সুযোগ দেয়।
১. Radial Tree Diagram
Radial Tree ডায়াগ্রাম একটি গহ্বর আকৃতির ট্রি যা কেন্দ্রে একটি মূল নোড রেখে তার শাখাগুলিকে বৃত্তাকারভাবে প্রদর্শন করে। এটি সাধারণত ডেটার মধ্যে সম্পর্ক বা হায়ারার্কি দেখাতে ব্যবহৃত হয়, যেমন ফোল্ডার স্ট্রাকচার বা অ্যাসেম্বলির গঠন।
Radial Tree Diagram তৈরির উপাদান:
d3.tree(): ট্রি লেআউট তৈরি করতে ব্যবহৃত হয়।d3.partition(): ডেটাকে পার্টিশন বা শ্রেণীভুক্ত করার জন্য ব্যবহৃত হয়।- Arc Path: নোডগুলির মধ্যে সংযোগ তৈরি করতে আর্ক ব্যবহার করা হয়।
উদাহরণ: Radial Tree Diagram
// ডেটাসেট
const data = {
"name": "root",
"children": [
{ "name": "A", "children": [{ "name": "A1" }, { "name": "A2" }] },
{ "name": "B", "children": [{ "name": "B1" }, { "name": "B2" }] }
]
};
// SVG তৈরি
const width = 600, height = 600;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
// Tree লেআউট এবং রেডিয়াল লেআউট সেটিংস
const tree = d3.tree().size([2 * Math.PI, 250]);
const root = d3.hierarchy(data);
tree(root);
// Path তৈরি
svg.selectAll(".link")
.data(root.links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
// নোড তৈরি
const nodes = svg.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", "node")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI})translate(${d.y},0)`);
// নোডে টেক্সট যোগ
nodes.append("text")
.attr("dy", ".31em")
.attr("x", d => d.x < Math.PI ? 6 : -6)
.style("text-anchor", d => d.x < Math.PI ? "start" : "end")
.text(d => d.data.name);
ব্যাখ্যা:
d3.hierarchy(): হায়ারার্কিক্যাল ডেটা তৈরি করার জন্য ব্যবহৃত হয়।d3.tree(): ট্রি লেআউট তৈরি করে, যার মাধ্যমে নোডগুলির অবস্থান নির্ধারণ করা হয়।d3.linkRadial(): রেডিয়াল স্টাইলের লিঙ্ক (যোগাযোগ রেখা) তৈরি করতে ব্যবহৃত হয়।transform: SVG গঠন এবং স্থানান্তর করতে ব্যবহৃত।
২. Collapsible Tree Diagram
Collapsible Tree ডায়াগ্রাম একটি ট্রি ভিউ যেখানে নোডগুলির শাখাগুলি সঙ্কুচিত বা প্রসারিত (collapse/expand) করা যায়। এটি খুবই কার্যকর যখন আপনার কাছে বিশাল পরিমাণ ডেটা থাকে এবং আপনি ব্যবহারকারীদের শাখাগুলি কোলাপস বা এক্সপ্যান্ড করার সুবিধা দিতে চান।
Collapsible Tree Diagram তৈরির উপাদান:
d3.tree(): ট্রি লেআউট তৈরি করতে ব্যবহৃত হয়।collapse(): নোডের শাখাগুলি সঙ্কুচিত করতে ব্যবহৃত হয়।expand(): সঙ্কুচিত শাখাগুলি প্রসারিত করতে ব্যবহৃত হয়।
উদাহরণ: Collapsible Tree Diagram
// ডেটাসেট
const data = {
"name": "root",
"children": [
{ "name": "A", "children": [{ "name": "A1" }, { "name": "A2" }] },
{ "name": "B", "children": [{ "name": "B1" }, { "name": "B2" }] }
]
};
// SVG তৈরি
const width = 600, height = 600;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(50,50)`);
// Tree লেআউট সেটিংস
const tree = d3.tree().size([height, width - 100]);
const root = d3.hierarchy(data);
tree(root);
// Path তৈরি
svg.selectAll(".link")
.data(root.links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkVertical()
.x(d => d.y)
.y(d => d.x));
// নোড তৈরি
const nodes = svg.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
// নোডে টেক্সট যোগ
nodes.append("circle")
.attr("r", 10)
.style("fill", "#ff5722")
.on("click", click);
nodes.append("text")
.attr("dy", ".35em")
.attr("x", d => d.children ? -13 : 13)
.style("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
// কলাপস এবং এক্সপ্যান্ড ফাংশন
function click(event, d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
function update(source) {
const nodes = svg.selectAll(".node")
.data(root.descendants(), d => d.id || (d.id = ++i));
nodes.transition()
.duration(750)
.attr("transform", d => `translate(${d.y},${d.x})`);
const links = svg.selectAll(".link")
.data(root.links(), d => d.target.id);
links.transition()
.duration(750)
.attr("d", d3.linkVertical()
.x(d => d.y)
.y(d => d.x));
}
ব্যাখ্যা:
d3.hierarchy(): ডেটাকে হায়ারার্কিক্যাল আকারে রূপান্তরিত করে।click(): কলাপস বা এক্সপ্যান্ড করার জন্য ক্লিক ইভেন্ট হ্যান্ডলার। যখন কোনো নোডে ক্লিক করা হয়, তখন তার শাখাগুলি সঙ্কুচিত বা প্রসারিত হয়।update(): ট্রি রেন্ডার করার পরবর্তী ধাপ, যেখানে নোড এবং লিঙ্কের অবস্থান আপডেট হয়।
৩. কাস্টমাইজেশন এবং উন্নয়ন
D3.js দিয়ে Radial এবং Collapsible Tree ডায়াগ্রাম তৈরির সময় আপনি চাইলে নিচের ফিচারগুলো কাস্টমাইজ করতে পারেন:
- নোডের শেপ এবং রঙ: নোডের স্টাইল এবং রঙ কাস্টমাইজ করা যায়, যাতে প্রতিটি নোড আলাদা দেখতে পারে।
- শাখার ধরণ: শাখার আকার এবং রঙ কাস্টমাইজ করা যায়।
- টেক্সট স্টাইল: নোডের টেক্সটের ফন্ট, সাইজ এবং অবস্থান পরিবর্তন করা যায়।
- ট্রানজিশন ইফেক্টস: নোড এবং লিঙ্কের জন্য অ্যানিমেশন এবং ট্রানজিশন ইফেক্ট ব্যবহার করা যেতে পারে, যাতে ইউজার ইন্টারঅ্যাকশন আরও স্মুথ হয়।
Radial এবং Collapsible Tree ডায়াগ্রাম D3.js এর মাধ্যমে তৈরি করা খুবই সহজ এবং কার্যকর। Radial Tree ডায়াগ্রামটি একটি বৃত্তাকার গঠন তৈরি করে, যেখানে ডেটার হায়ারার্কি সহজে বোঝা যায়, এবং Collapsible Tree ডায়াগ্রামটি শাখাগুলিকে সঙ্কুচিত বা প্রসারিত করার সুবিধা প্রদান করে, যা বিশাল ডেট
াসেটের জন্য উপযুক্ত। D3.js-এ এই ধরনের ডায়াগ্রাম তৈরি করার জন্য কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ ফিচারগুলির সাথে কাজ করা যায়।
Read more
