Line Generator মেথড

D3.js-এ Line Generator একটি গুরুত্বপূর্ণ মেথড যা একটি ডেটা সেটের উপর ভিত্তি করে লাইন ভিজ্যুয়াল তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত line chart বা path chart তৈরি করতে ব্যবহৃত হয়, যেখানে একটি নির্দিষ্ট ডেটা সেটের পয়েন্টগুলির মধ্যে একটি লাইন আঁকা হয়।

Line Generator মেথডটি ডেটা পয়েন্টগুলির মধ্যে একটি গ্রাফিকাল লাইন তৈরি করে এবং এটি আপনাকে SVG path (দ্বিমাত্রিক গ্রাফিক্যাল পাথ) তৈরি করতে সহায়ক। D3.js-এ, d3.line() ফাংশনটি ব্যবহৃত হয় লাইন জেনারেট করতে।

Line Generator তৈরি করা

d3.line() মেথড

d3.line() একটি line generator ফাংশন তৈরি করে যা ডেটা পয়েন্টের উপর ভিত্তি করে একটি SVG path তৈরি করে। এই মেথডটি আপনাকে ডেটা পয়েন্টগুলির উপর ভিত্তি করে লাইন ড্র করার জন্য একটি পাথ (path) আউটপুট দেয়।

সিনট্যাক্স:

const lineGenerator = d3.line()
                        .x(function(d) { return d.x; })   // x-অক্ষের জন্য মান
                        .y(function(d) { return d.y; });  // y-অক্ষের জন্য মান

এখানে:

• .x() মেথড x-অক্ষের জন্য ডেটার মান নির্ধারণ করে।
• .y() মেথড y-অক্ষের জন্য ডেটার মান নির্ধারণ করে।

Line Generator উদাহরণ

এখানে একটি সহজ উদাহরণ দেখানো হলো যেখানে কিছু ডেটা পয়েন্টের ভিত্তিতে একটি লাইন চার্ট তৈরি করা হয়েছে।

উদাহরণ: ডেটা পয়েন্টের মাধ্যমে লাইন তৈরি

// ডেটাসেট
const data = [
    {x: 10, y: 50},
    {x: 20, y: 80},
    {x: 30, y: 100},
    {x: 40, y: 90},
    {x: 50, y: 70}
];

// SVG তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 200);

// Line Generator তৈরি করা
const lineGenerator = d3.line()
                        .x(function(d) { return d.x * 10; })  // x-অক্ষের জন্য মান (স্কেলিং)
                        .y(function(d) { return d.y; });      // y-অক্ষের জন্য মান

// path তৈরি করা এবং লাইন আঁকা
svg.append("path")
   .data([data])                      // ডেটা পাস করা
   .attr("d", lineGenerator)          // লাইন জেনারেটর কল করা
   .attr("fill", "none")              // পূর্ণতা না থাকুক
   .attr("stroke", "blue")            // লাইন স্ট্রোকের রঙ
   .attr("stroke-width", 2);          // স্ট্রোকের প্রস্থ

এখানে:

• d3.line() লাইন জেনারেটর তৈরি করেছে।
• .x(function(d) { return d.x * 10; }) এবং .y(function(d) { return d.y; }) লাইন পয়েন্টগুলির x এবং y মান নির্ধারণ করে।
• svg.append("path") পাথ তৈরি করে এবং lineGenerator এর মাধ্যমে লাইন আঁকা হয়।

এই কোডটি 5টি ডেটা পয়েন্টের উপর ভিত্তি করে একটি সোজা লাইন আঁকবে।

Line Generator এর অতিরিক্ত কনফিগারেশন

D3.js-এ লাইন জেনারেটরের সাহায্যে আরও কিছু কনফিগারেশন করা যায়, যেমন curve এবং defined।

১. curve – লাইন সোজা না বাঁকা হবে তা নির্ধারণ করে

আপনি curve() মেথডের মাধ্যমে লাইনটিকে বাঁকা বা সোজা করতে পারেন। D3.js বেশ কয়েকটি বক্ররেখা সমর্থন করে, যেমন curveLinear, curveBasis, curveCardinal ইত্যাদি।

উদাহরণ:

const lineGenerator = d3.line()
                        .curve(d3.curveBasis)   // বক্ররেখা ব্যবহার করা
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; });

এখানে curve(d3.curveBasis) এর মাধ্যমে বক্ররেখা নির্ধারণ করা হয়েছে, যা একটি মসৃণ বক্র লাইন তৈরি করবে।

২. defined – undefined বা NaN মানগুলিকে ফিল্টার করা

আপনি defined() মেথডের মাধ্যমে কোন পয়েন্টগুলিকে লাইন তৈরির জন্য বৈধ বা অকার্যকর (undefined) হিসেবে চিহ্নিত করতে পারেন। এটি ডেটাতে কোন অগ্রহণযোগ্য মান (যেমন, NaN বা undefined) থাকলে সেগুলি ফিল্টার করতে সাহায্য করে।

উদাহরণ:

const lineGenerator = d3.line()
                        .defined(function(d) { return d.y >= 0; }) // শুধুমাত্র ধনাত্মক y-মান গ্রহণ
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; });

এখানে defined(function(d) { return d.y >= 0; }) দ্বারা শুধুমাত্র ধনাত্মক y মানগুলোকে বৈধ হিসেবে চিহ্নিত করা হয়েছে।

Line Generator-এর সাথে Scale ব্যবহার

লিনিয়ার স্কেল বা অন্যান্য স্কেল ব্যবহার করে আপনি ডেটার মানকে SVG প্যানেলে আরও ভালভাবে মানচিত্রিত করতে পারেন। উদাহরণস্বরূপ, ডেটা পয়েন্টগুলি স্কেল করে সেগুলিকে গ্রাফিক্যালভাবে উপস্থাপন করা।

const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.x)])
                 .range([0, 500]);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.y)])
                 .range([200, 0]);

const lineGenerator = d3.line()
                        .x(d => xScale(d.x))   // x-অক্ষ স্কেল করা
                        .y(d => yScale(d.y));  // y-অক্ষ স্কেল করা

এখানে xScale এবং yScale ডেটাকে স্কেল করে, যা লাইন তৈরিতে ব্যবহার করা হচ্ছে।

D3.js-এ Line Generator মেথড (d3.line()) একটি শক্তিশালী টুল যা ডেটা পয়েন্টগুলির উপর ভিত্তি করে লাইন তৈরি করতে ব্যবহৃত হয়। এটি আপনাকে ডেটার domain এবং range অনুযায়ী লাইন আঁকতে সহায়ক। আপনি লাইন তৈরির সময় curve এবং defined ফিচারের মাধ্যমে আরও কাস্টমাইজেশন করতে পারেন, যেমন বক্ররেখা তৈরি করা বা অগ্রহণযোগ্য মানগুলো ফিল্টার করা।