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

- visibility ۰ mode_comment

در قسمت قبلی کار با کتابخانه معروف و پرطرفدار D3 رو شروع کردیم و نحوه لود کردن و کدنویسی اون رو توضیح دادیم. در این قسمت میخوایم این آموزش رو به پایان برسونیم و اولین نمودار ستونی رو با استفاده از این ابزار قدرتمند به وجود بیاریم.آموزش ساخت نمودار ستونی با استفاده از D3.js - قسمت 2

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

یکبار دیگه کدها رو ببینید:

در قسمت قبل تا متد data رو توضیح دادیم و حالا میخوایم در مورد enter بحث کنیم.

متد enter

متد enter بصورت همزمان هم به داده هایی که به متد data فرستاده شده است نگاه میندازه و هم موارد انتخابی با استفاده از متد selectAll('rect') رو میبینه و بعد از اون سعی میکنه که به نحوی اونا رو با هم تطابق بده. این متد یک map رو بین اطلاعات و DOM به وجود میاره.

همونطور که در جلسه قبل بیان شد متد selectAll('rect') یک آرایه خالی رو برگشت میده چون هیچ المنت rect از قبل درون تگ SVG قرار ندارد. اما اگر نگاه کنید ما 9 داده رو بصورت آرایه به متد data پاس دادیم و در نتیجه متد enter نمیتونه یک آرایه 9 عضوی رو با یک آرایه خالی تطابق بده. پس خود متد enter به ازای اون داده هایی که مطابق با اونا المنت rect وجود نداره، یک rect به وجود میاره و میسازه.

متد append

همونطور که دیدید به دلیل اینکه هیچ rect ای از قبل در DOM وجود نداشت، متد enter به ازای هر داده یک rect رو به وجود آورد. بعد از متد enter از متد append('rect') استفاده شده است. این متد به ازای هر rect ساخته شده یکبار اجرا میشه و rect رو به تگ svg اضافه میکنه. پس از اونجا که 9 داده داشتیم، پس append 9 بار اجزا میشه و 9 المنت rect اضافه میشه.

متد attr

مرحله بعدی اینه که تصمیم بگیریم که چطور مستطیل های رو نمایش بدیم و ستونهای نمودار رو به وجود بیاریم. ما باید 4 ویژگی width و height و موقعیت افقی x و موقعیت عمودی y رو برای اونا مشخص کنیم. برای همه این موارد میتونیم از متد attr استفاده کنیم. ابتدا با موقعیت عمودی یا y شروع میکنیم:

اولین پارامتری که برای متد attr قرار داده میشه، مشخص میکنه که میخوایم چه ویژگی رو دستکاری کنیم. در کد بالا میخوایم y یا موقعیت افقی رو تعیین کنیم. پارامتر دوم یک callback function هست که در Return اون مقداری که میخوایم برای ویژگی y قرار داده بشه قرار میدیم. d همون مقدار داده متناظری هست که با استفاده از متد data معرفی شده بود. همونطور که گفتیم چون 9 عضو در آرایه وجود داره پس بقیه کدها 9 بار اجرا میشن و در هر بار اجرا، d یکی از داده ها می باشد.

در هر بار اجرای کد مقدار داده رو از کل ارتفاع المنت SVG کم میکنیم و به عنوان موقعیت عمودی ستون فعلی قرار میدیم. موقعیتهای x و y همیشه نسبت به بالا و سمت چپ صفحه محاسبه میشن. پس زمانی که مقدار d رو از ارتفاع کم میکنیم، به موقعیت عمودی برای ستون دست پیدا میکنیم.

مرحله بعد اینه که ارتفاع هر ستون رو مشخص کنیم. در اینجا برای اینکه همه ستونها تا پایین container کشیده بشن، ارتفاع اونا رو برابر با مقدار داده d قرار میدیم. بصورت زیر:

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

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 11)

میبینید که در اینجا از callback استفاده نشده و از d استفاده نکردیم و بصورت استاتیک عرض هر ستون رو مشخص کردیم. آخرین مرحله مشخص کردن موقعیت افقی هر ستون هست. این مرحله کمی پیچیده تر هست:

همونطور که میبینید این بار در تابع callback از ورودی دوم i استفاده کردیم. این پارامتر اندیس و موقعیت داده رو در آرایه مشخص میکنه. همونطور که میبینید به سادگی مقدار i رو در عرض ستون ضرب کردیم و در یک متغیر ذخیره کردیم. بعد از اون برای هر مورد یک رشته رو برای انتقال بصورت "translate(100)" برگشت دادیم. این کد باعث میشه که ستون مورد نظر 100 پیکسل به سمت راست انتقال پیدا کنه. و با این کد ساده شما اولین نمودار ستونی خودتون رو به وجود آوردید.

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

Source

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

نیاز به لاگین

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