آموزش ساخت نمودار ستونی با استفاده از D3.js - قسمت 1



visibility  
mode_comment   ۰

در این مطلب قصد دارم آموزش ساخت نمودار ستونی با استفاده از D3.js رو قرار بدم و امیدوارم که بدردتون بخوره و بتونین با استفاده از این ابزار قدرتمند نمودارهای مورد نظرتون رو بسازید و در سایت خودتون قرار بدین.آموزش ساخت نمودار ستونی با استفاده از D3.js

کتابخانه D3.js معروفترین و پرطرفدارترین ابزار برای به تصویر کشیدن اطلاعات یا Data visualization در سطح وب هست. چون یادگیری این ابزار مقداری سخت و زمانبر هست پس باید شروع کار با اون رو با یک مثال ساده شروع کرد.

در این مطلب یاد می‌گیرید که چطور اولین نمودار ستونی رو با استفاده از D3 به وجود بیارید. این مثال ساده و مقدماتی متدها و موارد پایه ای رو برای ار با D3 بهتون یاد میده و کمک میکنه که بهتر D3 رو بفهمید. روشهای مختلفی برای استفاده از ابزار D3 در پروژه هست که ما در اینجا ساده ترین روش اون رو توضیح میدیم. در اینجا ما کتابخانه D3 رو بصورت CDN درون فایل خودمون لود میکنیم تا بتونیم از اون استفاده کنیم. کد زیر رو ببینید:

همونطور که میبینید یک تگ SVG رو درون DOM قرار دادیم و d3 رو با استفاده از تگ Script لود کردیم. در انتها هم یک تگ Script دیگه قرار داده شده تا کدهای D3 رو درون اون قرار بدین و نمودار ستونی رو به وجود بیاریم.

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

اولین کاری که باید بکنیم اینه که المنت SVG رو انتخاب کنیم و مقداری استایل رو به اون بدیم تا بتونیم شروع به ساخت نمودار بکنیم. بصورت زیر:

همونطور که میبینید با استفاده از متد select میتونیم المنت svg رو انتخاب کنیم و به اون ویژگی های مورد نظرمون رو نسبت میدیم. میبینید که width و height المنت svg رو برابر با 500 و 300 پیکسل قرار دادیم و در نهایت هم کلاس bar-chart رو برای اون قرار دادیم. حالا میتونیم در کدهای CSS به این المنت استایل مورد نظرمون رو نسبت بدیم:

میبینید که یک رنگ پس زمینه برای اون مشخص کردیم. خروجی تا اینجای کار بصورت زیر هست:

حالا ما یک container داریم که میتونیم درون اون نمودار خودمون رو به وجود بیاریم. کد برای به وجود آوردن این نمودار ستونی مقداری پیچیده هست. پس ابتدا همه کدها رو قرار میدیم و بعد از اون مرحله به مرحله کدها رو توضیح میدیم.

متد selectAll

اولین چیزی که در کدها به اون برمیخوریم و مقداری مارو گیج میکنه استفاده از .selectAll("rect") هست در صورتی که هیچ تگ <rect> در کدهای ما وجود نداره. پس این متد یک آرایه خالی رو برمی‌گردونه چون هیچ rect ای وجود نداره که بخواد اونا رو انتخاب بکنه. در ادامه با استفاده از متد enter().append() المنتهای rect مورد نظرمون رو به وجود میاریم.

احتمالا نحوه استفاده از این متدها شما رو گیج کرده است و نمیتونین به خوبی کارکردن selectAll و enter و append رو بفهمید. توضیح در مورد این متدها خارج از محدوده این آموزش مقدماتی هست و اگر میخواید بیشتر در مورد این متدها مطالعه کنید و اونا رو به خوبی بفهمید، میتونین این لینک رو مطالعه کنید.

متد data

بعد از اون بصورت زنجیری و Chain از متد data استفاده کردیم و داده های مورد نظرمون رو بصورت آرایه به اون پاس دادیم. با استفاده از این داده ها و اعداد و ارقام میخوایم نمودارهای ستونی رو به وجود بیاریم. هر عدد ارتفاع ستون مربوط به خودش رو مشخص میکنه.

در قسمت بعدی بقیه کدها رو براتون توضیح میدیم.

امیدوارم از این مطلب خوشتون اومده باشه.

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.