Tree এবং Cluster Diagram এর জন্য Link এবং Node Styling

D3.js ব্যবহার করে Tree এবং Cluster Diagram তৈরি করা খুবই সহজ, এবং এগুলোর মাধ্যমে আপনি ডেটার মধ্যে সম্পর্ক এবং আর্কিটেকচার ভিজ্যুয়ালাইজ করতে পারেন। এই ডায়াগ্রামগুলোর মধ্যে Node এবং Link গুলি স্টাইল করা গুরুত্বপূর্ণ, কারণ এটি ডেটার গঠন এবং সম্পর্ককে স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে।

এই গাইডে, আমরা Tree Diagram এবং Cluster Diagram এর জন্য Link এবং Node Styling নিয়ে আলোচনা করবো, যা D3.js দিয়ে তৈরি করা যাবে।

১. প্রাথমিক সেটআপ

প্রথমে, আপনাকে D3.js লাইব্রেরি HTML ফাইলে যুক্ত করতে হবে:

<script src="https://d3js.org/d3.v7.min.js"></script>

এছাড়া, একটি SVG ক্যানভাস তৈরি করতে হবে যেখানে Tree এবং Cluster Diagram দেখানো হবে।

<svg width="800" height="600"></svg>

২. Tree Diagram তৈরি করা

Tree Diagram এ Node গুলি গাছের শাখার মতো সাজানো হয় এবং Link গুলি গাছের ডালপালার মতো কাজ করে। এখানে, আমরা একটি সাধারণ Tree Diagram তৈরি করবো এবং এর Link এবং Node গুলি স্টাইল করবো।

ডেটা প্রস্তুত করা

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1" },
        { name: "Grandchild 2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 3" },
        { name: "Grandchild 4" }
      ]
    }
  ]
};

Tree Layout সেটআপ করা

Tree Diagram তৈরি করতে D3.js এর d3.tree() ফাংশন ব্যবহার করা হয়। এটি ডেটার ভিত্তিতে সঠিক ভাবে নোড ও লিঙ্ক তৈরি করে।

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

const svg = d3.select("svg").append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const tree = d3.tree().size([height, width]);

// ডেটা পার্স করা
const root = d3.hierarchy(treeData);
tree(root);

Link এবং Node Styling করা

এখন আমরা Tree Diagram এর Links এবং Nodes এর স্টাইলিং করবো।

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

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

// নোডের সার্কেল স্টাইলিং
node.append("circle")
  .attr("r", 10)
  .style("fill", "steelblue")
  .style("stroke", "black")
  .style("stroke-width", 2);

// নোডের টেক্সট
node.append("text")
  .attr("dx", 12)
  .attr("dy", 3)
  .style("font-size", "14px")
  .style("fill", "black")
  .text(d => d.data.name);

এখানে:

• Links এর জন্য path এলিমেন্ট ব্যবহার করা হয়েছে, যা ডেটার সংযোগ নির্দেশ করে। এটি d3.linkHorizontal() দ্বারা তৈরি হয়েছে।
• Nodes এর জন্য circle এলিমেন্ট ব্যবহার করা হয়েছে, এবং এতে স্টাইলিং করা হয়েছে রঙ, সীমানা ইত্যাদি।
• Text এলিমেন্ট ব্যবহার করে নোডের নাম প্রদর্শন করা হয়েছে।

৩. Cluster Diagram তৈরি করা

Cluster Diagram, Tree Diagram এর মতো, তবে এটি সাধারণত প্রতিটি নোডকে একটি ক্লাস্টারে বা গ্রুপে দেখানোর জন্য ব্যবহার করা হয়। এই ডায়াগ্রামে, একই ক্লাস্টারে থাকা নোডগুলি একে অপরের কাছাকাছি অবস্থান করে, যা ডেটার সম্পর্ক পরিষ্কারভাবে প্রকাশ করে।

Cluster Layout সেটআপ করা

Cluster Diagram তৈরি করতে D3.js এর d3.cluster() ফাংশন ব্যবহার করা হয়। এখানে, আমরা একটি Cluster Diagram তৈরি করবো।

const cluster = d3.cluster().size([height, width]);

// ডেটা পার্স করা
const rootCluster = d3.hierarchy(treeData);
cluster(rootCluster);

Link এবং Node Styling করা

এখন, Cluster Diagram এর Links এবং Nodes এর স্টাইলিং করবো।

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

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

// নোডের সার্কেল স্টাইলিং
nodeCluster.append("circle")
  .attr("r", 10)
  .style("fill", "lightgreen")
  .style("stroke", "black")
  .style("stroke-width", 2);

// নোডের টেক্সট
nodeCluster.append("text")
  .attr("dx", 12)
  .attr("dy", 3)
  .style("font-size", "14px")
  .style("fill", "black")
  .text(d => d.data.name);

এখানে:

• Links এর জন্য path এলিমেন্ট ব্যবহার করা হয়েছে, যা ক্লাস্টারের মধ্যে নোডগুলোর সংযোগ দেখায়।
• Nodes এর জন্য circle এলিমেন্ট ব্যবহার করা হয়েছে, এবং ক্লাস্টারের মধ্যে নোডের স্টাইলিং করা হয়েছে।

৪. ইন্টারঅ্যাকটিভ স্টাইলিং (হোভার ইফেক্ট)

ইন্টারঅ্যাকটিভিটি যোগ করার জন্য, আপনি হোভার ইফেক্ট ব্যবহার করতে পারেন, যাতে ব্যবহারকারীরা যখন কোন নোডের উপর মাউস রাখে, তখন নোডটি বড় হয়ে যায় অথবা তার রঙ পরিবর্তন হয়।

// হোভার ইফেক্ট
node.on("mouseover", function(d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 15)
      .style("fill", "orange");
})
.on("mouseout", function(d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 10)
      .style("fill", "steelblue");
});

এখানে, mouseover ইভেন্টে, নোডের রঙ এবং আকার পরিবর্তন করা হচ্ছে, এবং mouseout ইভেন্টে এটি আগের অবস্থায় ফিরে আসবে।

D3.js দিয়ে Tree এবং Cluster Diagram তৈরি করার সময়, Link এবং Node Styling অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডেটার গঠন এবং সম্পর্ককে পরিষ্কারভাবে উপস্থাপন করে। D3.js এ আপনি বিভিন্ন রঙ, আকার, এবং হোভার ইফেক্ট ব্যবহার করে এই ডায়াগ্রামগুলিকে আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন।