جلسه ۰۲ : نحوه نصب D3.js

• جزئیات
• نوع کحتواآموزشی

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، بعد از معرفی فریم ورک D3.js در سری آموزش های دوره D3.js به نحوه نصب D3.js و استفاده کتابخانه D3.js می رسیم.این کتابخانه نرم افزاری توسط یک دانشجوی PHD دانشگاه استانفورد تاسیس شده است و مختلف Data Driven Document است.

نحوه نصب D3.js

قبل از شروع، ما به اجزای زیر نیاز داریم:

• کتابخانه D3.js
• ویرایشگر
• مرورگر اینترنت
• وب سرور

اجازه دهید مرحله به مرحله با جزئیات پیش برویم.

کتابخانه D3.js

ما باید کتابخانه D3.js را به صفحه وب HTML خود اضافه کنیم و از D3.js برای ایجاد نمایش داده استفاده کنیم. می توان این کار را در دو روش زیر انجام دهیم :

• افزودن کتابخانه D3.js به پوشه پروژه شما
• افزودن کتابخانه D3.js از CDN (شبکه تحویل محتوا)

دانلود کتابخانه D3.js

D3.js یک کتابخانه منبع باز است و کد منبع کتابخانه در وب سایت https://d3js.org/ به صورت رایگان در دسترس است. وب سایت D3.js را ببینید و آخرین نسخه D3.js را به صورت(d3.zip) دانلود کنید. در حال حاضر، آخرین نسخه این کتابخانه ۴٫۶٫۰ است.
پس از اتمام دانلود، فایل را باز کنید و به دنبال d3.min.js بروید.
این نسخه کوچک شده از کد منبع D3.js می باشد.
فایل d3.min.js را کپی کنید و آن را در پوشه ریشه پروژه یا هر پوشه دیگری که میخواهید تمام فایلهای کتابخانه را نگه دارید، قرار دهید. فایل d3.min.js را در صفحه HTML خود وارد کنید، همانطور که در زیر نشان داده شده است.
مثال : اجازه دهید ما مثال زیر را در نظر بگیریم.

D3.js یک کد جاوا اسکریپت است، بنابراین ما باید تمام کد D3 ما را در تگ “script” بنویسیم. ممکن است ما نیاز به تغییر عناصر موجود DOM داشته باشیم، بنابراین بهتر است قبل از پایان تگ “body” کد D3 را بنویسیم.

افزودن کتابخانه D3 از CDN

می توانیم از کتابخانه D3.js با پیوند آن به طور مستقیم به صفحه HTML از شبکه تحویل محتوا (CDN) استفاده کنیم.

CDN شبکه ای از سرورهایی است که در آن فایل ها میزبانی می شوند و به کاربر بر اساس مکان جغرافیایی خود تحویل داده می شوند.

اگر از CDN استفاده کنیم، نیازی به دانلود کد منبع نیست.

افزودن کتابخانه D3.js  با استفاده از یو آر ال CDN توسط لینک https://d3js.org/d3.v4.min.js صورت می گیرد.

مثال زیر را در نظر بگیرید :

ویرایشگر D3.js

ما به یک ویرایشگر برای شروع نوشتن کد شما نیاز داریم. برخی از IDE های بزرگ (محیط توسعه مجتمع) با پشتیبانی از جاوا اسکریپت مانند :

• ویژوال استودیو کد
• WebStorm
• Eclipse
• Sublime Text

این ویرایشگرها تکمیل کد هوشمند را ارائه می دهند و همچنین برخی از فریم ورک های مدرن جاوا اسکریپت را پشتیبانی می کنند.

اگر IDE های fancy نداشته باشید، همیشه می توانید از یک ویرایشگر اصلی مانند Notepad، VI و غیره استفاده کنید.

مرورگر اینترنت (Web Browser)

D3.js در تمام مرورگرها به جز IE8 و نسخه های پایین تراز آن کار می کند.

وب سرور

اکثر مرورگرها فایل های محلی HTML را مستقیما از سیستم فایل محلی ارائه می دهند.

با این حال، محدودیت های خاصی در هنگام بارگیری فایل های داده خارجی وجود دارد.

در فصل دوم این آموزش، داده ها را از فایل های خارجی مانند CSV و JSON بارگیری می کنیم.

بنابراین، اگر ما سرور را از ابتدا راه اندازی کنیم، برای ما آسان تر خواهد بود.

شما می توانید از هر وب سروی که با آن راحت تر هستید استفاده کنید . به عنوان مثال IIS، Apache و …

مشاهده صفحه شما

در اغلب موارد، ما می توانیم فایل HTML خود را در یک مرورگر وب برای مشاهده آن باز کنیم.

با این حال، هنگام بارگیری منابع داده خارجی ، برای شما راحت تر است که یک سرور محلی را اجرا کنید و صفحه خود را از سرور (http: // localhost: 8080) که قابل اعتماد تراست مشاهده کنید.

کلام آخر

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