مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، اگر به خاطر داشته باشید در جلسه قبل نحوه نصب فریم ورک D3.js را فرا گرفتید. در سومین جلسه از آموزش های دوره D3.js شما با برخی مفاهیم در D3.js آشنا خواهید شد. برخی از استانداردهای وب در D3.js استفاده می شوند شامل SVG و CSS و … می باشند.
مفاهیم در D3.js
- D3.js یک کتابخانه جاوا اسکریپت منبع باز است برای :
- دستکاری داده کاوی مدل اشیاء اسناد (DOM).
- کار با داده ها و اشکال های متفاوت
- قرار دادن عناصر بصری برای داده های خطی، سلسله مراتبی، شبکه و جغرافیایی.
- فعال کردن انتقال رآسان بین حالت های رابط کاربر (UI) .
- فعال کردن تعامل کاربر موثر
استانداردهای وب در D3.js
قبل از اینکه ما بتوانیم D3.js را برای ایجاد تجسم(visualizations) استفاده کنیم، باید با استانداردهای وب در D3.js و مفاهیم در D3.js آشنا شویم.
استانداردهای وب زیر که به وفور در D3.js استفاده می شوند عبارتند از:
- زبان نشانه گذاری (HTML)
- مدل اشیاء اسناد (DOM)
- صفحات سبک آبشاری (CSS)
- مقیاس پذیری گرافیک برداری (SVG)
- JavaScript
اکنون اجازه دهید هر یک از این استانداردهای وب را یک به یک با جزئیات کامل بررسی نماییم.
زبان نشانه گذاری (HTML)
همانطور که می دانیم، HTML برای ساختن محتوای صفحه وب مورد استفاده قرار می گیرد و در یک فایل متنی با پسوند “html.” ذخیره می شود.
مثال
یک نمونه کد HTML معمولی مانند کد زیر است :
مثال :
| <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title></title> </head> <body> </body> </html> |
مدل اشیاء سند (DOM)
هنگامی که یک صفحه HTML توسط یک مرورگر بارگیری می شود، به یک ساختار سلسله مراتبی تبدیل می شود. هر تگ در HTML به یک عنصر / شیء در DOM با سلسله مراتب والد-فرزند تبدیل می شود. این باعث می شود که بتوان کدهایHTML منطقی تری ساخت. هنگامی که DOM شکل می گیرد، عناصر صفحه به راحتی دستکاری می شود (اضافه / تغییر / حذف).اجازه دهید DOM را با استفاده از سند HTML زیر بهتر درک کنیم .
مثال :
| <!DOCTYPE html> <html lang = "en"> <head> <title>My Document</title> </head> <body> <div> <h1>Greeting</h1> <p>Hello World!</p> </div> </body> </html> |
مدل اشیاء سند HTML فوق به شرح زیر عمل می کند:
صفحات سبک آبشاری (CSS)
در حالی که کدهای HTML ساختار را به صفحه وب می دهند، سبک CSS باعث می شود که صفحه وب بهتر به نظر برسند. CSS یک زبانی است که برای توصیف ارائه یک سند نوشته شده در HTML یا XML (از جمله زبان های XML مانند SVG یا XHTML) استفاده می شود. CSS توضیح می دهد چگونه عناصر باید بر روی یک صفحه وب رندر شوند.
مقیاس پذیری گرافیک برداری (SVG)
SVG یک راه برای رندر تصاویر در صفحات وب است. SVG مستقیما خود تصویر نیست، بلکه یک راه برای ایجاد تصاویر با استفاده از متن است. همانطور که از نام آن پیداست، یک بردار مقیاس پذیر است. با توجه به اندازه مرورگر خود، خودش را مقیاس می کند، بنابراین تغییر اندازه مرورگر شما تصویر را تحریف نخواهد کرد. همه مرورگرها به غیر از IE 8 و نسخه های پایین تر از آن ، SVG را پشتیبانی می کنند. تجسم داده ها نمایه های بصری هستند و استفاده از SVG برای نمایش دادن تصاویر با استفاده از D3.js مناسب است.به عنوان یک بوم از SVG فکر کنید که در آن می توانیم اشکال مختلف را رنگ کنیم.
بنابراین برای شروع، اجازه دهید یک بتگ SVG ایجاد کنیم.
مثال :
| <svg width = "500" height = "500"></<svg> |
شاخص اندازه گیری پیش فرض برای SVG پیکسل است، بنابراین لازم نیست مشخص کنیم که آیا واحد ما پیکسل است یا نه. حالا اگر میخواهیم یک مستطیل بسازیم، می توانیم آن را با استفاده از کد زیر ایجاد کنیم :
مثال :
| <svg width = "500" height = "500"> <rect x = "0" y = "0" width = "300" height = "200"></rect> </svg> |
ما می توانیم اشکال دیگر مانند خط، دایره، لوزی، متن و حتی مسیر را در SVG ایجاد کنیم.
درست مانند عناصر HTML ، سبک و استفاده از عناصر SVG ساده هستند.
اجازه دهید رنگ پس زمینه مستطیل را به رنگ زرد تنظیم کنیم.
برای این، ما باید ویژگی “fill” اضافه کنیم و مقدار را به عنوان زرد مشخص کنیم همانطورکه در زیر نشان داده شده است :
مثال :
| <svg width = "500" height = "500"> <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect> </svg> |
کلام آخر
استانداردهای وب در D3.js که شامل d3js از HTML، SVG و CSS هستند برای بصری سازی داده ها استفاده می شوند و به شما کمک میکند که داده های خود را به DOM صفحه وصل کنید. DOM همان المان های HTML صفحه هستند. آموزش مفاهیم در D3.js به اتمام رسید، در جلسه بعدی به مبحث انتخاب ها در D3.js می پردازیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
