داده نگار

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

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

برای ایجاد محورهای افقی و عمودی در کتابخانه D3 باید از توابع axisBottom و axisLeft استفاده کنیم. که کد کامل آن به شکل زیر است:

خروجی کد:

ابتدا متغییرهای حاشیه، عرض و ارتفاع را مقداردهی می‌کنیم.

در متغییر data مقادیر داده‌هایی که داریم مشخص شده است، که در این مثال شامل مقادیر زیر می‌باشد.

در مرحله بعدی با استفاده از متغییرهای عرض و ارتفاع تگ svg را ایجاد می‌کنیم.

var svg = d3.create("svg")
.attr("width", width)
.attr("height", height)

پس از ایجاد svg، با استفاده از مقیاس خطی (scaleLinear) داده‌های ورودی را به یک محدوده خروجی پیوسته تبدیل می‌کنیم.

var xscale = d3.scaleLinear() -> استفاده از مقیاس خطی برای محور افقی
domain([0, d3.max(data)]) -> مشخص کرده دامنه تغییرات از صفر تا بیشترین مقدار موجود در داده‌ها
range([0, width - margin.right]) -> مشخص کردن محدوده ترسیم از صفر تا ۴۰ پیکسل کمتر از عرض svg
var yscale = d3.scaleLinear() -> استفاده از مقیاس خطی برای محور عمودی
domain([0, d3.max(data)]) -> مشخص کرده دامنه تغییرات از صفر تا بیشترین مقدار موجود در داده‌ها
range([height - margin.top, 0]) -> مشخص کردن محدوده ترسیم از صفر تا ۳۰ پیکسل کمتر از ارتفاع svg

برای ایجاد محورها باید از توابع d3-axis استفاده کنیم.

var x_axis = d3.axisBottom(xscale) -> مقداردهی به تابع رسم محور پایین با استفاده از داده‌های مقیاس شده در مرحله قبل
var y_axis = d3.axisLeft(yscale) -> مقداردهی به تابع رسم محور چپ با استفاده از داده‌های مقیاس شده در مرحله قبل

در مرحله آخر با استفاده از ویژگی g در تگ svg، که وظیفه ایجاد یک گروه از المان‌ها را دارد محورها را ایجاد می‌کنیم.