D3 এর মাধ্যমে Tree Layout তৈরি

D3.js এ Tree Layout ব্যবহার করে হায়ারার্কিকাল ডেটা (hierarchical data) বা গাছের মতো ডেটার ভিজ্যুয়ালাইজেশন তৈরি করা হয়। এটি সাধারণত ডেটার সম্পর্ককে গাছের শাখার মতো দেখাতে সাহায্য করে, যেখানে প্রতিটি নোড একটি ডেটা পয়েন্ট এবং তার সন্তান (child) নোডগুলির মধ্যে সম্পর্ক প্রদর্শিত হয়। D3.js এ tree() ফাংশন ব্যবহার করে এই ধরনের ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

Tree Layout এর মাধ্যমে আপনি গাছের মতো সম্পর্ক গঠন করতে পারেন, যেখানে প্রতিটি পিতা (parent) নোড তার সন্তানের (child) নোডের সঙ্গে যুক্ত থাকে।

১. Tree Layout এর ধারণা

Tree Layout হল এমন একটি কাঠামো যেখানে একটি মূল (root) নোড থেকে শুরু করে বিভিন্ন স্তরের (levels) সন্তান নোড পর্যন্ত সম্পর্ক তৈরি হয়। এটি একটি গাছের মতো সাজানো হয়, যেখানে প্রতিটি নোডের একটি পিতা নোড থাকে এবং একটি বা একাধিক সন্তান নোড থাকতে পারে।

২. Tree Layout তৈরির জন্য প্রয়োজনীয় ডেটা

Tree Layout তৈরি করার জন্য ডেটাকে সাধারণত হায়ারার্কিকাল ফর্ম্যাট এ সাজানো হয়, যেমন:

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1.1" },
        { name: "Grandchild 1.2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 2.1" },
        { name: "Grandchild 2.2" }
      ]
    }
  ]
};

এই ডেটাতে name হচ্ছে নোডের নাম এবং children হচ্ছে সন্তানের নোডের অ্যারে।

৩. D3.js Tree Layout তৈরি করা

Tree Layout তৈরি করতে D3.js এর d3.tree() ফাংশন ব্যবহার করা হয়। এই ফাংশনটি হায়ারার্কিকাল ডেটাকে আর্গুমেন্ট হিসেবে নিয়ে তা থেকে সঠিক x, y পজিশন হিসেব করে দেয়, যা গাছের শাখার জন্য উপযুক্ত।

৩.১ Tree Layout Setup

SVG এলিমেন্ট তৈরি:

const width = 600;
const height = 400;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

Tree Layout ফাংশন তৈরি:

const tree = d3.tree()
  .size([height - margin.top - margin.bottom, width - margin.left - margin.right]); // গাছের আকার

৪. Tree Data Transformation

D3.js এ tree() ফাংশনটি ডেটাকে ইনপুট হিসেবে নিয়ে, নোডগুলোর x এবং y পজিশন নির্ধারণ করে। এই পজিশনগুলো দিয়ে পরবর্তী ধাপে গাছের শাখাগুলি (links) এবং নোডগুলি তৈরি করা হয়।

const root = d3.hierarchy(treeData); // ডেটাকে হায়ারার্কিকাল ফর্ম্যাটে রূপান্তর করা
tree(root); // root নোডের জন্য পজিশন গণনা

৫. Tree Layout এর নোড এবং লিঙ্ক (Links) তৈরি

৫.১ নোড (Nodes)

নোডের জন্য <circle> এবং <text> এলিমেন্ট ব্যবহার করা হয়:

// নোড তৈরি
const nodes = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".node")
  .data(root.descendants()) // সমস্ত নোড
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

// নোডগুলিতে বৃত্ত (circle) যোগ করা
nodes.append("circle")
  .attr("r", 10)
  .style("fill", "lightsteelblue")
  .style("stroke", "steelblue")
  .style("stroke-width", "2");

// নোডের নাম যোগ করা
nodes.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -12 : 12) // সন্তান নোড আছে কি না
  .style("text-anchor", "middle")
  .text(d => d.data.name);

৫.২ লিঙ্ক (Links)

গাছের শাখাগুলির জন্য <path> এলিমেন্ট ব্যবহার করা হয়, যা পিতা নোড থেকে সন্তানের নোডের দিকে একটি লাইন আঁকে।

// লিঙ্ক তৈরি
const links = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".link")
  .data(root.links()) // পিতা-সন্তান সম্পর্ক
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal() // লিঙ্কের জন্য পথ
    .x(d => d.x)
    .y(d => d.y))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", "2");

৬. পূর্ণ Tree Layout কোড

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1.1" },
        { name: "Grandchild 1.2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 2.1" },
        { name: "Grandchild 2.2" }
      ]
    }
  ]
};

const width = 600;
const height = 400;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

const tree = d3.tree()
  .size([height - margin.top - margin.bottom, width - margin.left - margin.right]);

const root = d3.hierarchy(treeData); // ডেটাকে হায়ারার্কিকাল ফর্ম্যাটে রূপান্তর

tree(root); // পজিশন গণনা

// লিঙ্ক তৈরি
const links = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".link")
  .data(root.links())
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal().x(d => d.x).y(d => d.y))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", "2");

// নোড তৈরি
const nodes = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

// নোডগুলিতে বৃত্ত (circle) যোগ করা
nodes.append("circle")
  .attr("r", 10)
  .style("fill", "lightsteelblue")
  .style("stroke", "steelblue")
  .style("stroke-width", "2");

// নোডের নাম যোগ করা
nodes.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -12 : 12)
  .style("text-anchor", "middle")
  .text(d => d.data.name);

D3.js এ Tree Layout ব্যবহার করে হায়ারার্কিকাল ডেটা বা গাছের মতো সম্পর্কের ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব। এখানে ডেটাকে গাছের মতো সাজানো হয়, যেখানে প্রতিটি পিতা নোডের সঙ্গে তার সন্তান নোডের সম্পর্ক দেখানো হয়। D3.js এর tree() ফাংশন এবং hierarchy() ডেটা রূপান্তর ফাংশন ব্যবহার করে এই ধরনের গাছ তৈরি করা হয়, যা ডেটার অন্তর্নিহিত সম্পর্কগুলো খুব সুন্দরভাবে উপস্থাপন করতে সাহায্য করে।