داده نگار

ایجاد نمودار خطی در کتابخانه D3

در این مقاله نحوه ایجاد نمودار خطی در کتابخانه D3 را آموزش خواهیم داد.

در این نمونه، ابتدا یک svg ایجاد کرده و داخل آن یک گروه (g) را با استفاده از append ایجاد کرده‌ایم. سپس داده‌هایی که برای نمودار لازم داریم را تعریف می‌کنیم. با استفاده از توابع مقیاس‌بندی (scale)، محدوده‌های مقیاس‌های محورهای x و y را تعیین می‌کنیم. سپس محورهای x و y را با استفاده از axisBottom و axisLeft به ترتیب ایجاد و به svg اضافه می‌کنیم. سپس یک مسیر (path) برای نمایش خط نمودار رسم می‌شود و در نهایت برچسب‌ها و عنوان‌های مناسب برای نمودار ایجاد می‌شوند.

کد کامل ایجاد نمودار خطی در کتابخانه D3 به صورت زیر می‌باشد:

خروجی کد:

ایجاد svg و توابع اولیه

var width = 600 -> ایجاد متغیر برای عرض svg و مقداردهی به آن
var height = 500 -> ایجاد متغیر برای ارتفاع svg و مقداردهی به آن
var svg = d3.create('svg') -> ایجاد تگ svg
attr('width', width) -> مقدارهی به عرض svg
attr('height', height) -> مقداردهی به ارتفاع svg
var g = svg.append('g') -> ایجاد یک گروه g برای گروه‌بندی کامل اجزای نمودار
attr('transform', 'translate(60, 20)'); -> جابجایی گروه g برای ایجاد فضای مناسب برای برچسب‌ها
var requestsMonthly -> لیست داده‌ها
var parseYear = d3.timeParse("%Y"); -> ایجاد تابع پارس کننده برای متناظر کردن رشته‌های تاریخ چهار رقمی به فرمت تاریخ

مقیاس بندی محور افقی در کتابخانه D3

var scaleX = d3.scaleTime() -> مشخص کردن محدوده مقیاس محور افقی با استفاده از تابع scaleTime
domain(d3.extent(requestsMonthly, function(d) { return parseYear(d.month.toString());})) -> مشخص کردن دامنه مقیاس محور افقی با استفاده از شروع و پایان داده‌ها
range([0, 500]); -> محدوده‌ای که در svg اشغال می‌کند.

مقیاس بندی محور عمودی در کتابخانه D3

var scaleY = d3.scaleLinear() -> مشخص کردن مقیاس محور عمودی با استفاده از تابع scaleLinear
domain([0, d3.max(requestsMonthly, d => d.count)]) -> مشخص کردن دامنه مقیاس محور عمودی با استفاده از شروع و پایان داده‌ها
range([450, 0]); -> محدوده‌ای که در svg اشغال می‌کند

رسم محورهای عمودی و افقی در کتابخانه D3

var axisBottom = d3.axisBottom() -> استفاده از axisBottom برای ایجاد محور افقی
scale(scaleX) -> مقداردهی به مقیاس تابع، با استفاده از مقیاس‌هایی که قبلا تعریف کرده‌ایم
tickFormat(d3.timeFormat("%Y")); -> مشخص کردن فرمت محور افقی براساس سال
var axisLeft = d3.axisLeft(scaleY); -> استفاده از axisLeft برای ایجاد محور عمودی و مقداردهی با آن با استفاده از مقیاس‌هایی که قبلا تعریف کرده‌ایم
g.append('g') -> افزودن گروه g برای رسم محور افقی در svg
attr('transform', 'translate(0, 450)') -> جابجایی گروه g
call(axisBottom); -> فراخوانی تابع ایجاد محور افقی
g.append('g') -> افزودن گروه g برای رسم محور عمودی در svg
call(axisLeft); -> -> فراخوانی تابع ایجاد محور عمودی

ایجاد نمودار خطی در کتابخانه D3

var lineGenerator = d3.line() -> استفاده از تابع line برای ایجاد نمودار خطی
x(function(d) { return scaleX(parseYear(d.month.toString()));}) -> این بخش از تابع مکان شروع خط را در محور افقی مشخص می‌کند
y(function(d) { return scaleY(d.count);}); -> این بخش از تابع مکان شروع خط را در محور عمودی مشخص می‌کند
var line = lineGenerator(requestsMonthly); -> مقداردهی به تابع با استفاده از داده‌ها
g.append('path') -> اضافه کردن مسیر با استفاده از path
attr('d', line) -> مقداردهی به ویژگی d با استفاده از تابع line
attr('fill', 'none') -> خالی بودن سطح زیر خط
attr('stroke', 'steelblue') -> مشخص کردن رنگ خط
attr('stroke-width', 1.5); -> مشخص کردن پهنای خط