نمودار ستونی با D3.js – دوره آموزش مقدماتی تا پیشرفته – قسمت اول

در سلسله مقالات پیش رو که در فرازگر منتشر خواهد شد قصد داریم به آموزش D3.js که یکی از کتابخانه‌های عالی درزمینهٔ مصورسازی داده‌هاست بپردازیم. در ابتدا با شرح مختصری از توانمندی‌های این کتابخانه آشنا خواهید شد و سپس برای شروع با یک مثال ساده از ساخت نمودار ستونی شروع خواهیم کرد.

D3.js چیست؟

D3 یک کتابخانه جاوا اسکریپت منبع باز (open source) است که برای مصور سازی داده ها استفاده می شود. D3 مخفف کلمه ی Data Driven Documents است و به طور کلی به شما اجازه می دهد که visualization  ها و گرافیک های تعاملی بسیار زیبا و داینامیک را در صفحه وب رسم کنید. به عبارت دیگر، D3.js به شما این امکان را می دهد که به کمک HTML،CSS و JAVA SCRIPT به داده ها زندگی ببخشید یا اصلاحا نمودارهایی متحرک رسم کنید. از آنجایی که D3.js بسیار سریع است، برای حجم داده های بالا عملکردی خوب و کارآمد دارد.

دانلود D3.js

1. شما همیشه می‌توانید اخرین نسخه کتابخانه D3.js را از سایت اصلی دانلود کنید.
2. همچنین نسخه ۵ کتابخانه D3.js را از اینجا دانلود کنید.

ساخت نمودار ستونی با D3.js

See the Pen
نمودار ستونی by taha (@tahatabibzadeh)
on CodePen.

معرفی داده ها در ۳D.js

در خط اول ابتدا به معرفی داده ها که همان ارتفاع نمودار ستونی باشد پرداختیم.

var dataArray = [5,11,25];

معرفی SVG

در خط بعدی تگ SVG را به فایل HTML خود معرفی کنیم. برای این کار ما ابتدا یک تگ div با ایدی form در اچ تی ام ال خود قبلا معرفی کرده بودیم و در اینجا با این دستور درواقع تگ SVG را داخل div مذکور قرار داده‌ایم و بعد کمی به آن style دادیم.

var svg = d3.select("#form").append("svg").attr("height","600px").attr("width","100%");

تشکیل نمودار ستونی با D3.js

svg.selectAll("rect")
      .data(dataArray)
      .enter().append("rect")
                .attr("height",function(d,i){ return d*1; })
                .attr("width","50")
                .attr("fill","pink")
                .attr("x",function(d,i){ return 60*i; })
                .attr("y",function(d,i){ return 600-(d*1); });

• اولین خط که مربوط به svg.selectAll(“rect”) است که کمی گیج‌کننده به نظر می‌رسد چون ما هیچ تگی با این نام نداریم. پس این متد برای ما یک آرایه خالی را برمی‌گرداند.
• در خط بعدی مقادیر داده‌هایمان را که قبلاً به معرفی انحا پرداختیم فراخوانی می‌کنیم.
• حالا نوبت به آن می‌رسد که با تشکیل تگ‌های rect آن را به ستون تبدیل کنیم.
• احتمالاً  function(d,i){ return d*1; } نظر شمارا جلب کرده است. این فانکشن درواقع به تعداد داده‌های درون آرایه یک حلقه بر روی attr ایجاد می‌کند و ارتفاع ستون‌ها را تشکیل می‌دهد.
• دو خط بعدی عرض و رنگ ستون را مشخص می‌کند.
• خط هفتم فاصله هر ستون را مشخص می‌کند. i مرتبه داده در آرایه است که در هر دور حلقه ضربدر ۶۰ (فاصله ستون‌ها) می‌شود.
• به دلیل اینکه در svg نقطه (۰,۰) ما همیشه گوشه سمت چپ بالا است باید با ترفندی محل آن را به پایین فرم انتقال دهیم  درنتیجه مقدار محل قرارگیری در راستای Y برابر می‌شود با ارتفاع svg منهای مقدار داده در آن حلقه

از اینکه فرازگر را در مقاله نمودار ستونی با D3.js همراهی کردید سپاس گذاریم.