/ فاوا / برنامه نویسی

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

   مقدمه
   مفاهیم در D3.js
   مدل اشیاء سند (DOM)
   انتخاب‌گرها
   متد‌ها و پیکربندی محور API

مقدمه

D3 مخفف Data-Driven Documents است. D3.js یک کتابخانه منبع باز جاوا اسکریپت است که توسعه و دستکاری‌شده برای (Document Object Model) بر اساس داده‌ها است. D3 دارای امکانات زیادی برای ایجاد جلوه‌های بصری جذاب و کاربرپسند بوده و همچنین می‌توان با استفاده از آن تعامل بهترین با کاربر ایجاد نمود. همچنین این نرم‌افزار بر اساس استانداردهای وب بوده و می‌توان در HTML، CSS و SVG از آن استفاده نمود. نمایش داده‌ها(Data Visualization) یکی از بخش‌های اساسی فرآیندهایی مانند داده کاوی است. همچنین نمایش داده‌های آماری مختلف، میتواند فرآیند تحلیل کاربر را ساده سازی نماید.

پیش نیازها در D3.js

قبل از ادامه انواع مفاهیم ارائه شده در این آموزش، فرض می‌شود که خوانندگان در حال حاضر از آنچه در چارچوب هستند، آگاهی دارند.
علاوه بر این، اگر خوانندگان دانش صحیح در مورد HTML، CSS و جاوا اسکریپت داشته باشند، بسیار مفید خواهند بود.
دانلود کتابخانه 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 و نسخه‌های پایین تراز آن کار می‌کند.

مفاهیم در 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 معمولی مانند کد زیر است :
مثال :

مدل اشیاء سند (DOM)

هنگامی که یک صفحه HTML توسط یک مرورگر بارگیری می‌شود، به یک ساختار سلسله مراتبی تبدیل می‌شود. هر تگ در HTML به یک عنصر / شیء در DOM با سلسله مراتب والد-فرزند تبدیل می‌شود. این باعث می‌شود که بتوان کدهایHTML منطقی تری ساخت. هنگامی که DOM شکل می‌گیرد، عناصر صفحه به راحتی دستکاری می‌شود (اضافه / تغییر / حذف).اجازه دهید DOM را با استفاده از سند HTML زیر بهتر درک کنیم .
مثال :
Greeting
Hello World!
مدل اشیاء سند HTML فوق به شرح زیر عمل می‌کند:
صفحات سبک آبشاری (CSS)
در حالی که کدهای HTML ساختار را به صفحه وب می‌دهند، سبک CSS باعث می‌شود که صفحه وب بهتر به نظر برسند. CSS یک زبانی است که برای توصیف ارائه یک سند نوشته شده در HTML یا XML (از جمله زبان‌های XML مانند SVG یا XHTML) استفاده می‌شود. CSS توضیح می‌دهد چگونه عناصر باید بر روی یک صفحه وب رندر شوند.
مقیاس پذیری گرافیک برداری (SVG)
SVG یک راه برای رندر تصاویر در صفحات وب است. SVG مستقیما خود تصویر نیست، بلکه یک راه برای ایجاد تصاویر با استفاده از متن است. همانطور که از نام آن پیداست، یک بردار مقیاس پذیر است. با توجه به اندازه مرورگر خود، خودش را مقیاس می‌کند، بنابراین تغییر اندازه مرورگر شما تصویر را تحریف نخواهد کرد. همه مرورگرها به غیر از IE 8 و نسخه‌های پایین تر از آن، SVG را پشتیبانی می‌کنند. تجسم داده‌ها نمایه‌های بصری هستند و استفاده از SVG برای نمایش دادن تصاویر با استفاده از D3.js مناسب است.به عنوان یک بوم از SVG فکر کنید که در آن می‌توانیم اشکال مختلف را رنگ کنیم.
بنابراین برای شروع، اجازه دهید یک بتگ SVG ایجاد کنیم.
مثال :
شاخص اندازه گیری پیش فرض برای SVG پیکسل است، بنابراین لازم نیست مشخص کنیم که آیا واحد ما پیکسل است یا نه. حالا اگر میخواهیم یک مستطیل بسازیم، می‌توانیم آن را با استفاده از کد زیر ایجاد کنیم :
مثال :
ما می‌توانیم اشکال دیگر مانند خط، دایره، لوزی، متن و حتی مسیر را در SVG ایجاد کنیم.
درست مانند عناصر HTML، سبک و استفاده از عناصر SVG ساده هستند.
اجازه دهید رنگ پس زمینه مستطیل را به رنگ زرد تنظیم کنیم.
برای این، ما باید ویژگی “fill” اضافه کنیم و مقدار را به عنوان زرد مشخص کنیم همانطورکه در زیر نشان داده شده است :
مثال :
استانداردهای وب در D3.js که شامل d3js از HTML، SVG و CSS هستند برای بصری سازی داده‌ها استفاده می‌شوند و به شما کمک میکند که داده‌های خود را به DOM صفحه وصل کنید. DOM همان المان‌های HTML صفحه هستند. آموزش مفاهیم در D3.js به اتمام رسید، در جلسه بعدی به مبحث انتخاب‌ها در D3.js می‌پردازیم.

انتخاب‌گرها

 انتخابگرهای CSS این اجازه را می‌دهد که یک یا چند عنصر را در یک صفحه وب انتخاب شود. علاوه بر این، می‌توانیم در ارتباط با مجموعه داده‌های از پیش تعریف شده، آنها را تغییر، افزودن یا حذف شود. نحوه استفاده از انتخاب‌ها برای ایجاد نمایش داده‌ها(data visualizations) و متد ()append و متد ()selectAll

D3.js برای انتخاب عناصر از صفحه HTML دو روش دارد:
() select :
تنها یک عنصر DOM رامطابق با انتخابگر CSS داده شده انتخاب می‌کند. همچنین اگر بیش از یک عنصر برای انتخابگر CSS داده شده وجود داشته باشد، تنها اولین مورد را انتخاب می‌کند.
متد ()selectAll :
همه عناصر DOM را مطابق با انتخابگر CSS داده شده انتخاب می‌کند. اگر شما با انتخاب عناصر در jQuery آشنا هستید، انتخابگرهای D3.js تقریبا مشابه آن‌ها هستند.
متد () select :
عنصر HTML را براساس انتخابگرهای CSS انتخاب می‌کند. در CSS Selectors، می‌توانید عناصر HTML را به سه صورت تعریف و به آنها دسترسی داشته باشید:
تگ کردن یک عنصر HTML (به عنوان مثال div، h1، p، span و…)
نام کلاس یک عنصر HTML
شناسه یک عنصر HTML
اجازه دهید مفهوم را با ذکر مثال روشن تر کنیم.
انتخاب توسط تگ
شما می‌توانید عناصر HTML را با استفاده از TAG خود انتخاب کنید. دستورالعمل زیر برای انتخاب عناصر تگ div استفاده می‌شود :
مثال :

d3.select(“div”)

مثال: صفحه “select_by_tag.html” را ایجاد کرده و تغییرات زیر را اضافه کنید :
مثال :
Hello World!
هنگام اجرای صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :
مثال :
Hello World!
انتخاب به واسطه نام کلاس
عناصر HTML را با استفاده از نام کلاس CSS توسط دستور زیر می‌توان انتخاب کرد.
مثال :

d3.select(“.”)
alert(d3.select(".myclass").text());

انتخاب واسطه شناسه
هر عنصر در یک صفحه HTML باید یک شناسه منحصر به فرد داشته باشد. ما می‌توانیم از این شناسه‌ی منحصر به فرد به عنوان عنصر برای دسترسی به آن با استفاده از روش select () استفاده کنیم.
مثال :
d3.select(“#”)
یک صفحه وب “select_by_id.html” ساخته و تغییرات زیر را اضافه کنید.
مثال :
Hello World!
با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید.
مثال :
Hello World!
اضافه کردن عناصر DOM توسط انتخاب در D3.js
انتخاب در D3.js، متدهای ()append و ()text را برای اضافه کردن عناصر جدید به اسناد HTML موجود را فراهم می‌کند. در این بخش در مورد اضافه کردن عناصر DOM با جزئیات توضیح داده شده است.
متد ()append
متد ()append یک عنصر جدید را به عنوان آخرین فرزند عنصر در انتخاب فعلی اضافه می‌کند. این متد همچنین می‌تواند سبک عناصر، ویژگی‌ها، خواص، محتوای HTML و متن را تغییر دهد.
یک صفحه وب “select_and_append.html” را ایجاد کرده و تغییرات زیر را اعمال کنید :
مثال :
Hello World!
بعد از باز کردن صفحه در مرورگر خروجی زیر ایجاد می‌شود.
مثال :
Hello World!
در این مثال، متد ()append محدوده تگ جدید را در داخل تگ div مانند زیر نشان می‌دهد :
مثال :
Hello World!
متد ()text
برای تنظیم محتوای عناصر انتخاب شده / اضافه شده استفاده می‌شود. اجازه دهید ما مثال فوق را تغییر دهیم و کاربرد متد ()text را در زیر نشان بدهیم.
مثال :
Hello World!
اکنون صفحه را مجدد لود کنید خروجی زیر به شما نمایش داده می‌شود :
مثال :
Hello World! from D3.js
اسکریپت فوق عملیات زنجیره‌ای انجام می‌دهد. D3.js هوشمندانه تکنیکی به نام سینتکس زنجیره‌ای که ممکن است jQuery آن را شناسایی کند استفاده می‌کند. با استفاده از متدهای زنجیره‌ای همراه با دوره‌ها، می‌توانید چندین اقدام را در یک خط کد انجام دهید. این عمل سریع و آسان است. همچنین همان اسکریپت می‌تواند بدون سینتکس زنجیره‌ای مانند زیر نشان داده شود.
مثال :

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

اصلاح عناصر
روش‌هایی برای تغییر محتوا و سبک عناصر از جمله این متدها میتوان به ()html()،attr و() style اشاره نمود.
متد html()
این متد برای تنظیم محتوای HTML از عناصر انتخاب شده / اضافه شده استفاده می‌شود.
یک صفحه وب “select_and_add_html.html” ایجاد کنید و کد زیر را اضافه کنید.
مثال :
با باز نمودن این صفحه در مرورگر، نتیجه زیر نمایش داده می‌شود :
مثال :
1
Hello World! from D3.js
متد ()attr
متد ()attr برای افزودن یا به روزرسانی صفات عناصر انتخاب شده مورد استفاده قرار می‌گیرد. برای درک بهتر یک صفحه وب “select_and_modify.html” را ایجاد کنید و کد زیر را اضافه نمایید.
مثال :
Hello World!
با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :
مثال :
1
Hello World!
متد ()style
این متد برای تعیین ویژگی سبک عناصر انتخاب شده استفاده می‌شود. یک صفحه وب “select_and_style.html” ایجاد کنید و کد زیر را اضافه کنید.
مثال :
Hello World!
با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :
مثال :
Hello World!
متد ()classed
متد ()classed به طور انحصاری برای تعیین ویژگی “class” یک عنصر HTML استفاده می‌شود. از آنجا که یک عنصر HTML تنها می‌تواند چندین کلاس داشته باشد؛ ما باید هنگام اختصاص کلاس به عنصر HTML مراقب باشیم. این متد می‌داند چگونه یک یا چند کلاس را بر عناصر اداره کند و آن را اجرا کند.
اضافه کردن کلاس : برای اضافه کردن یک کلاس، پارامتر دوم متد کلاس باید درست باشد.
به مثال زیر توجه کنید :
مثال :
1
d3.select(".myclass").classed("myanotherclass", true);
حذف کلاس : برای حذف یک کلاس، پارامتر دوم متد کلاس باید به false تنظیم شود. مانند مثال زیر :
مثال :
1
d3.select(".myclass").classed("myanotherclass", false);
بررسی کلاس: برای بررسی وجود یک کلاس، فقط پارامتر دوم را حذف کنید و نام کلاسی را که پرس و جو می‌کنید، منتقل کنید. این درست است، اگر وجود داشته باشد، درست است، اگر نباشد مقدار غلط را برمی گرداند.
مثال :
1
d3.select(".myclass").classed("myanotherclass");
در کد بالا اگر هر عنصر در انتخاب دارای کلاس باشد مقدار درست بازگردانده می‌شود. از انتخاب d3.select برای انتخاب تک انتخاب استفاده کنید.
تعویض کلاس : برای تعویض یک کلاس به حالت مخالف، اگر قبلا وجود داشته باشد باید آن را حذف کنیم، سپس اگر وجود نداشت آن را اضافه کنید – شما می‌توانید یکی از موارد زیر را انجام دهید.برای عنصر تک، کد ممکن است مانند زیر نشان داده شود :
مثال :
1
2
var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));
متد ()selectAll
متد ()selectAll برای انتخاب چندین عنصر در سند HTML استفاده می‌شود. متد select اولین عنصر را انتخاب می‌کند، اما روش selectAll تمام عناصری را که با رشته انتخاب خاص مطابقت دارند، انتخاب می‌کند..اگر هیچ انتخابی مطابقت نداشته باشد، انتخاب را خالی باز می‌گرداند. در متد ()selectAll ما می‌توانیم تمام متدهای اصلاح و یا افزودنی مانند :append() html ()، text ()، attr ()، style ()، class، و… را استفاده کنیم. در متد ()selectAll، متد‌ها بر تمام عناصر تطبیق شده تاثیر می‌گذارند.
با ایجاد یک صفحه وب جدید “select_multiple.html” مفهوم را بهتر می‌فهمیم.صفحه را ایجاد و اسکریپت زیر را اضافه کنید :
مثال :Message
Hello World!
با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید.
مثال :
Message
Hello World!
در اینجا، متد ()attr برای هر دو تگ div و h2 اعمال می‌شود و رنگ متن در هر دو تگ به قرمز تغییر می‌کند.
کلام آخر
با مفهوم انتخاب در D3.js آشنا شدید و کارکرد متدهایی مانند : متد ()append، متد ()selectAll و … را نیز فرا گرفتید.امیدوارم از طالب ذکر شده بهره مند شده باشید.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در جلسه پنجم از دوره فریم ورک D3.js، مفهوم پیوند داده در D3.js را باز خواهیم کرد.پیوند داده یک مفهوم مهم دیگر در D3.js است. این کارایی با انتخاب‌ها انجام می‌شود و ما را قادر به دستکاری سند HTML با توجه به مجموعه داده‌های ما (مجموعه‌ای از مقادیر عددی) می‌سازد. عملکرد داده‌ها در D3.js نیز به شما عزیزان آموزش داده میشود.به طور پیش فرض، D3.js در متد‌های خود داده‌ها را به بالاترین اولویت اختصاص می‌دهد و هر آیتم در مجموعه داده‌ها مربوط به یک عنصر HTML است.
پیوند داده در D3.js
پیوند داده چیست؟
پیوند داده در D3.js به ما امکان اصلاح و حذف عناصر (عنصر HTML و همچنین عناصر SVG تعبیه شده) بر اساس داده‌های موجود در سند HTML موجود را می‌دهد.
به طور پیش فرض، هر آیتم داده در پیوند داده مربوط به یک عنصر (گرافیکی) در سند است.
با تغییر دادن داده‌ها، عنصر مربوطه نیز می‌تواند به راحتی تغییر داده شود. پیوند داده ارتباط نزدیک بین داده‌های ما و عناصر گرافیکی سند ایجاد می‌کند.
پیوند داده دستکاری عناصر بر اساس داده‌ها را تبدیل به یک روند بسیار ساده و آسان می‌کند.
پیوند داده در D3.js چگونه کار می‌کند؟
هدف اصلی پیوند داده در D3.js این است که عناصر سند موجود را با مجموعه داده‌های داده شده ترسیم کند. به این صورت که یک نمایش مجازی از سند را با توجه به مجموعه داده داده شده ایجاد می‌کند و متدهایی را برای کار با نمایش مجازی فراهم می‌کند. اجازه دهید یک مجموعه داده ساده را در زیر نشان بدهیم.
مثال :
[10, 20, 30, 25, 15]
داده‌ها با پنج آیتم تنظیم می‌شوند بنابراین، می‌توان آن را به پنج عنصر سند ترسیم کرد.
با استفاده از متد سلکتورهای ()selectAll و متد ()data در data join، عنصر li را از سند زیر ترسیم(Map) کنید.
HTML
مثال :
D3.js code
مثال :
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);
اکنون در سند پنج عنصر مجازی وجود دارد. دو عنصر مجازی دو عنصرli است که در سند تعریف شده است همانطور که در زیر نشان داده شده است :
مثال :
1. li - 10
2. li - 20
ما می‌توانیم از تمام متدهای اصلاح عنصر selector مانند ()attr ()، style ()، text و… برای دو li که در زیر نشان داده شده است استفاده کنیم.
مثال :
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });
تابع در متد ()text برای دریافت عناصر li داده‌های ترسیم شده استفاده می‌شود.
در اینجا، d نشان دهنده ۱۰ برای اولین عنصر li و ۲۰ برای عنصر li دیگر است.
سه عنصر بعدی می‌تواند به هر عنصر دیگری ترسیم شود اینکار را می‌توان با استفاده از متد ()enter درdata join و متد ()appen در انتخابگرها انجام داد. متد ()enter دسترسی به داده‌های باقیمانده را فراهم می‌کند (که به عناصر موجود نمایش داده نمی‌شود) و متد ()append برای ایجاد عنصر جدید از داده‌های مربوطه استفاده می‌شود.
اجازه دهید ما برای موارد باقیمانده داده نیز، li را ایجاد کنیم. نقشه داده به شرح زیر است :
مثال :
1
2
3
3. li - 30
4. li - 25
5. li - 15
کد برای ایجاد یک عنصر li به صورت زیر می‌باشد :
مثال :

d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });

پیوند داده یا Data join یک متد دیگر به نام ()exit برای پردازش داده به صورت پویا از مجموعه داده‌ها را دارد که به صورت زیر نشان داده شده است.
مثال :
1
2
3
4
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
در اینجا، ما چهار مورد از مجموعه داده‌ها و لایه مربوطه آن را با استفاده از متد ()exitو ()remove حذف کردیم. کد کامل به شرح زیر است :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
onclick = "javascript:remove()" />
نتیجه کد بالا به شرح زیر می‌باشد :
متدهای پیوند داده در D3.js
پیوند داده چهار روش زیر را برای کار با مجموعه داده فراهم می‌کند :
()datum
()data
()enter
()exit
اجازه دهید هر کدام از این متدها را با جزییات بیان کنیم.
متد ()datum
()datum برای تعیین ارزش یک عنصر تک در سند HTML استفاده می‌شود.
این عنصر زمانی استفاده می‌شود که عنصر انتخاب شده با انتخابگرها انتخاب شود.
به عنوان مثال
ما می‌توانیم یک عنصر موجود (تگ p) را با استفاده از متد () select انتخاب کنیم و سپس داده‌ها را با استفاده از متد ()datum تنظیم کنیم. هنگامی که داده‌ها تنظیم می‌شوند، می‌توانیم متن انتخاب شده را تغییر دهیم یا عنصر جدیدی را اضافه کنیم و متن را با استفاده از داده‌ها توسط ()datum تعیین کنیم.
برای درک بیشتر، یک صفحه “datajoin_datum.html” ایجاد کنید و کد زیر را به آن اضافه کنید :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
خروجی کد بالا به صورت زیر است :
متد ()data
این متد برای اختصاص یک داده به مجموعه‌ای از عناصر در یک سند HTML استفاده می‌شود.
یک بار که عناصر HTML با انتخابگرها انتخاب می‌شوند استفاده می‌شود.
در مثال لیست ما،از آن برای تنظیم مجموعه داده برای انتخابگر li استفاده کرده ایم.
مثال :
1
2
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15]);
متد ()enter
مجموعه‌ای از آیتم داده را صادر می‌کند که برای آن هیچ عنصر گرافیکی وجود نداشته است. در مثال زیر، ما آن را برای ایجاد عناصر جدید li استفاده می‌کنیم.
مثال :
1
2
3
4
5
6
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d) { return "This is dynamically created element and the value is " + d; });
متد ()exit
مجموعه‌ای از عناصر گرافیکی که برای آنها هیچ داده‌ای وجود ندارد را خروجی می‌دهد.
در این مثال ما از آن استفاده کرده ایم تا یکی از عناصر li را به صورت پویا با از بین بردن آیتم داده در مجموعه داده استفاده کنیم.
مثال :
1
2
3
4
5
6
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
عملکرد داده‌ها در D3.js
در بخش تغییر DOM، در مورد متد‌های مختلف ویرایش DOM در D3.js مانند ()style و ()text و… یاد گرفتیم اکنون می‌خواهیم به بررسی عملکرد داده‌ها در D3.js بپردازیمم.
هر یک از این توابع معمولا به عنوان پارامتر آن مقدار ثابت را می‌گیرد.
با این وجود، در زمینه Data join، عملکرد داده‌ها در D3.js بعنوان یک پارامتر ناشناس عمل می‌کند.
این تابع ناشناس، داده‌های مربوطه و شاخص مجموعه داده تعیین شده را با استفاده از متد ()data می‌گیرد.
بنابراین، این عملکرد ناشناس برای هر یک از مقادیر داده شده ما به DOM تعلق می‌گیرد. تابع ()text زیر را در نظر بگیرید.
مثال :
1
2
3
.text(function(d, i) {
return d;
});
در این تابع، می‌توانیم هر منطقی را برای دستکاری داده‌ها اعمال کنیم. اینها توابع ناشناس هستند، به این معنی که هیچ نامی در ارتباط با تابع وجود ندارد. به غیر از پارامتر داده (d) و (index (i، می‌توانیم با استفاده از این کلمه کلیدی به شیء زیر دسترسی پیدا کنیم.
مثالی از عملکرد داده‌ها در D3.js :
مثال :
1
2
3
4
5
6
.text(function (d, i) {
console.log(d); // the data element
console.log(i); // the index element
console.log(this); // the current DOM object
return d;
});
مثال زیر را در نظر بگیرید :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
کد اسکریپت بالا خروجی زیرا تولید خواهد کرد :
مثال :
1
2
3
4
5
The index is 0 and the data is 1
The index is 1 and the data is 2
The index is 2 and the data is 3
در مثال بالا، پارامتر “d” عنصر داده شما را به شما می‌دهد، همچنین”i” یک فهرست داده‌ها را در آرایه می‌دهد و “this” یک مرجع از عنصر فعلی DOM است. در این مثال this عنصر پاراگراف است. توجه داشته باشید که ما تابع داده (data.) را در بالا نامگذاری کردیم.
تابع ()data اطلاعات را برای عناصر انتخاب شده فراهم می‌کند، که در مثال ما آرایه داده است.
کلام آخر
عملکرد داده‌ها در D3.js و پیوند داده با ذکر متدهای پرکاربرد در D3.js به پایان رسید.با ما همراه باشید تا در جلسه بعد مفهوم SVG در D3.js را فرا بگیرید.
جلسه ۰۶ : مفهوم SVG در D3.js
دسته‌بندی‌ها :
بازدید : 134
فهرست
مقدمه
مفهوم SVG در D3.js
مثال
SVG با استفاده از D3.js
عنصر مستطیل در SVG
عنصر دایره
عنصر بیضی
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه دیگری از آموزش‌های دوره D3.js را با مفهوم SVG در D3.js آغاز می‌کنیم. SVG مخفف عبارت Scalable Vector Graphics می‌باشد. SVG یک فرمت گرافیکی بردار مبتنی بر XML است. که گزینه‌هایی برای رسم اشکال مختلف مانند خطوط، عنصر مستطیل در SVG، حلقه‌ها، خط‌ها و … را فراهم می‌کند. بنابراین، طراحی تصویری با SVG به شما قدرت و انعطاف بیشتری می‌دهد.
مفهوم SVG در D3.js
برای درک مفهوم SVG در D3.js ابتدا از معرفی ویژگی‌های SVG شروع می‌کنیم.
برخی از ویژگی‌های مهم SVG عبارتند از:
SVG یک فرمت تصویر مبتنی بر بردار و مبتنی بر متن است.
SVG در ساختار مشابه HTML است.
SVG را می‌توان به عنوان یک مدل شی سند ارائه داد.
خواص SVG را می‌توان به عنوان ویژگی مشخص کرد.
SVG باید موقعیت مطلق نسبت به مبدأ (۰، ۰) داشته باشد.
SVG می‌تواند به عنوان در سند HTML موجود باشد.
مثال
اجازه دهید یک تصویر کوچک SVG ایجاد کنیم و آن را در سند HTML قرار دهیم.
مرحله ۱ : ایجاد یک تصویر SVG و تنظیم عرض به اندازه ۳۰۰ پیکسل و ارتفاع به اندازه ۳۰۰ پیکسل.
مثال :
1
2
3
در این مثال، تگ svg یک تصویر SVG را ایجاد می‌کند و دارای ویژگی‌های عرض و ارتفاع است. واحد پیش فرض قالب SVG پیکسل است.
مرحله ۲ : یک خط شروع از (۱۰۰، ۱۰۰) و پایان دادن به (۲۰۰، ۱۰۰) و ایجاد رنگ قرمز برای خط ایجاد کنید.
مثال :
1
2
style = "stroke:rgb(255,0,0);stroke-width:2"/>
در اینجا تگ خط( line) خط و ویژگی‌های آن را ترسیم می‌کند.x1، y1 به نقطه شروع و x2، y2 به نقطه پایانی اشاره دارد. ویژگی سبک، رنگ و ضخامت خط را با استفاده از stroke و سبک stroke-width تنظیم می‌کند.
x1 :مختصات x از نقطه اول است.
y1 : مختصات y از نقطه اول است.
x2 : مختصات x نقطه دوم است.
y2 : مختصات y نقطه دوم است.
stroke : رنگ خط.
stroke-width : ضخامت خط.
مرحله ۳ :
یک سند HTML ایجاد کنید،“svg_line.html” و SVG بالا را به صورت زیر بسازید.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
stroke-width:2"/>
برنامه فوق نتیجه‌ی زیر را ارائه می‌دهد.
SVG با استفاده از D3.js
برای ایجاد SVG با استفاده از D3.js، مراحل زیر را دنبال کنید.
مرحله ۱ : ایجاد یک شمارنده برای نگه داشتن تصویر SVG همانطور که در زیر داده شده است.
مثال :
1
مرحله ۲ : محتویات SVG را با استفاده از متد ()select انتخاب کنید و عنصر SVG را با استفاده از متد ()append اضافه کنید. با استفاده از متد‌های ()attr و() style صفات و سبک‌ها را اضافه کنید.
مثال :
1
2
3
4
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg").attr("width", width).attr("height", height);
مرحله ۳ : به طور مشابه، عنصر خط (line) را داخل عنصر svg همانطور که در زیر نشان داده شده اضافه کنید.
مثال :
1
2
3
4
5
6
7
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
کد کامل شده به صورت زیر می‌باشد.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
خروجی کد بالا به صورت زیر خواهد بود :
عنصر مستطیل در SVG
یک مستطیل با تگ به صورت زیر نشان داده می‌شود :
مثال :
1
ویژگی‌های عنصر مستطیل در SVG عبارت است از:
x : مختصات x از گوشه سمت چپ مستطیل است.
y : مختصات y از گوشه بالا سمت چپ مستطیل است.
width : نشان دهنده عرض مستطیل است.
height :ا نشان دهنده ارتفاع مستطیل است.
یک مستطیل در SVG به شرح زیر تعریف شده است.
مثال :
1
2
3
همان مستطیل را می‌توان به صورت پویا مانند زیر ایجاد کرد :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
کد بالا نتیجه زیر را تولید می‌کند.
عنصر دایره
یک دایره توسط تگ به صورت زیر ایجاد می‌شود.
مثال :
1
صفات دایره به شرح زیر است:
cx : مختصات x از مرکز دایره است.
cy :مختصات y از مرکز دایره است.
r : نشان دهنده شعاع دایره است.
یک دایره ساده در SVG در زیر شرح داده شده است.
مثال :
1
2
3
همان دایره را نیز می‌توان به صورت پویا ایجاد کرد، همانطور که در زیر توضیح داده شده است.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
کد بالا خروجی زیر را ایجاد می‌کند :
عنصر بیضی
عنصر بیضی در SVG توسط تگ به صورت زیر شرح داده شده است.
مثال :
1
صفات یک بیضی به شرح زیر است:
cx:مختصات x از مرکز بیضی است.
cy :مختصات y از مرکز بیضی است.
rx : شعاع x دایره است.
ry : شعاع y دایره است.
یک بیضی ساده در SVG در زیر شرح داده شده است.
مثال :
1
2
3
همان بیضی را می‌توان به صورت پویا به صورت زیر ساخت.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
کد بالا خروجی زیر را ایجاد می‌کند :
کلام آخر
امیدوارم مفهوم SVG در D3.js برای شما کاربران عزیز قابل قبول بوده باشد.تاکید D3 بر استانداردهای وب، قابلیت‌های کامل مرورگرهای مدرن را به شما می‌دهد بدون اینکه نیاز باشد به یک چارچوب خاصی وصل شوید،همچنین امکان ترکیب اجزای بصری قدرتمند و رسم Visualization‌های پر قدرت را به شما می‌دهد.
خرداد
جلسه ۰۷ : تبدیل SVG در D3.js
دسته‌بندی‌ها :
بازدید : 122
فهرست
مقدمه
تبدیل SVG در D3.js
مقدمه‌ای بر تبدیل SVG در D3.js
یک نمونه کوچک
تبدیل با استفاده از D3.js
کتابخانه تبدیل
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، این جلسه از آموزش‌های دوره D3.js را به مبحث تبدیل SVG در D3.js می‌پردازیم. SVG گزینه‌هایی برای تبدیل عنصر شکل SVG تک یا گروهی از عناصر SVG را فراهم می‌کند. تبدیل SVG از ترجمه، مقیاس، چرخش پشتیبانی می‌کند. اجازه دهید در این جلسه تبدیل یا transformation را بیاموزیم.
تبدیل SVG در D3.js
مقدمه‌ای بر تبدیل SVG در D3.js
SVG یک ویژگی جدید را معرفی می‌کند، که آن ویژگی عبارت است از تبدیل برای حمایت از transformation می‌باشد. مقادیر ممکن یک یا بیشتر از موارد زیر هستند :
Translate : دو گزینه را می‌گیرد، Tx ترجمه (translate)را در امتداد محور X بیان می‌کند و ty به ترجمه در امتداد محور Y اشاره می‌کند. برای مثال (translate(30 30.
چرخش : سه گزینه را می‌گیرد، زاویه اشاره و زاویه چرخش و cx و cy که اشاره به مرکز چرخش در محور x و y است. اگر cx و cy مشخص نشوند، به صورت پیش فرض به منحنی فعلی سیستم مختصات پیش فرض می‌شود. برای مثال (rotate(60.
مقیاس : دو گزینه را می‌گیرد، sx به فاکتور پیمایش در امتداد محور x اشاره می‌کند و sy به فاکتور پیمایش در امتداد محور y اشاره می‌کند. در اینجا، sy اختیاری است و در صورتی که مشخص نشده باشد مقدار sx را می‌گیرد. برای مثال : (scale(10
(SkewX و Skew(SkewY : یک گزینه واحد را می‌گیرد؛ زاویه چرخش
زاویه در محور x برای SkewX و زاویه در محور y برای SkewY اشاره دارد. برای مثال : (skewx (20
یک مثال از مستطیل SVG توسط ترجمه(translate)، که به شرح زیر می‌باشد :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(30 30)">
خروجی کد بالا به صورت زیر می‌باشد :بیش از یک تبدیل نیز برای یک عنصر SVG تنها با استفاده از فاصله به عنوان جدایی مشخص می‌شود. اگر بیش از یک مقدار مشخص شده باشد، تبدیل به صورت یک به یک به ترتیب در جهت مشخص می‌شود.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(60 60) rotate(45)">
خروجی زیر بعد از اجرای کد بالا حاصل می‌شود :
تبدیل را می‌توان به عنصر گروه SVG نیز اعمال کرد. این ویژگی باعث می‌شود که گرافیک پیچیده تری در SVG تعریف شود مانند کد زیر :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
y = "20"
width = "60"
height = "30"
fill = "green">
cy = "0"
r = "30"
fill = "red"/>
کد بالا نتیجه زیر را تولید می‌کند.
یک نمونه کوچک
برای ایجاد یک تصویر SVG، با تغییر مقیاس و چرخاندن آن از تبدیل (transformation)استفاده کنید. مراحل زیر را دنبال کنید.
مرحله ۱ : ایجاد یک تصویر SVG و تنظیم عرض به اندازه ۳۰۰ پیکسل و ارتفاع به اندازه ۳۰۰ پیکسل.
مثال :
1
2
3
مرحله ۲ : ایجاد یک گروه SVG
مثال :
1
2
3
4
مرحله ۳ :یک مستطیل با طول ۶۰ و ارتفاع ۳۰ ایجاد کنید و آن را با رنگ سبز پر کنید.
مثال :
1
2
3
4
5
6
7
8
9
10
y = "20"
width = "60"
height = "30"
fill = "green">
مرحله ۴ : سپس یک دایره با شعاع ۳۰ ایجاد کنید و آن را با رنگ قرمز پر کنید.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
y = "20"
width = "60"
height = "30"
fill = "green">
cy = "0"
r = "30"
fill = "red"/>
مرحله ۵ : ویژگی تبدیل SVG در D3.js را اضافه کنید و همانطور که در زیر نشان داده شده است ترجمه را بچرخانید.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
y = "20"
width = "60"
height = "60"
fill = "green">
cy = "0"
r = "30"
fill = "red"/>
مرحله ۶ : ایجاد یک سند HTML
“svg_transform_rotate_group.html” و SVG بالا را مانند توضیحات زیر کامل کنید.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
y = "20"
width = "60"
height = "60"
fill = "green">
cy = "0"
r = "30"
fill = "red"/>
نتیجه زیر از کد بالا حاصل می‌شود.
تبدیل با استفاده از D3.js
برای ایجاد SVG با استفاده از D3.js، مراحل زیر را دنبال کنید.
مرحله ۱ : ایجاد شمارنده برای نگه داشتن تصویر SVG که به شرح زیر می‌باشد.
مثال :
1
مرحله ۲ : تصویر SVG را مطابق با توضیحات زیر بسازید.
مثال :
1
2
3
4
5
6
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
مرحله ۳ : یک عنصر گروه SVG ایجاد کنید و مانند کدهای زیر تنظیمات ترجمه و چرخش را انجام دهید.
مثال :
1
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
مرحله ۴ : ایجاد یک مستطیل SVG و اضافه کردن آن به داخل گروه.
مثال :
1
2
3
4
5
6
7
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
مرحله ۵ : اکنون یک دایره SVG ایجاد کنید و آن را داخل گروه قرار دهید.
مثال :
1
2
3
4
5
6
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
کد تکمیل شده به صورت زیر می‌باشد :
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
در نهایت کد بالا نتیجه زیر را تولید می‌کند.
کتابخانه تبدیل
D3.js یک کتابخانه جداگانه برای مدیریت تبدیل غیر دستی و ایجاد ویژگی‌های تبدیل فراهم می‌کند. این روش متد‌هایی را برای رسیدگی به همه انواع تغییرات فراهم می‌کند. بعضی از این متد‌ها عبارت‌اند از : ()transform()، translate ()، scale ()، rotate و… . شما می‌توانید با استفاده از اسکریپت زیر D3-transform را در صفحه وب خود اضافه نمایید.
مثال :
1
2
در مثال بالا، کد تبدیل (transform) را می‌توان به صورت زیر نشان داد :
مثال :
1
2
3
4
5
6
7
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);
کلام آخر
آموزش تبدیل SVG در D3.js با ویژگی‌های کاربردی به اتمام رسید.امیدوارم اط مطالب ذکر شده بهره کافی را برده باشید. با ما همراه باشید تا در جلسه بعدی انتقال در D3.js را فرا بگیرید.
خرداد
جلسه ۰۸ : انتقال در D3.js
دسته‌بندی‌ها :
بازدید : 88
فهرست
مقدمه
متد ()transition
یک انتقال ساده می‌تواند به صورت زیر تعریف شود:
یک نمونه کوچک
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، انتقال (transition) فرایند تغییر از یک حالت به یک حالت دیگر است. D3.js متد ()transition را برای انتقال در صفحه HTML فراهم می‌کند. در این جلسه از آموزش‌های دوره D3.js به بحث انتقال در D3.js می‌پردازیم.
متد ()transition
این متد برای همه انتخابگرها (selectors)در دسترس است و روند انتقال در D3.js را شروع می‌کند.
همچنین این متد از بسیاری از متد‌های انتخاب مانند ()attr()، style و… پشتیبانی می‌کند.
اما از متد‌های ()append و ()data که باید قبل از متد ()transition فراخوانی شوند، پشتیبانی نمی‌کند.
همچنین، این متد روش‌های خاصی برای انتقال مانند ()duration(), ease و … را فراهم می‌کند.
یک انتقال ساده می‌تواند به صورت زیر تعریف شود:
مثال :
1
2
3
d3.select("body")
.transition()
.style("background-color", "lightblue");
یک انتقال می‌تواند به طور مستقیم توسط متد ()d3.transition ایجاد شود و سپس به همراه selector‌ها به صورت زیر استفاده شود.
مثال :
1
2
3
4
5
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");
یک نمونه کوچک
اکنون یک مثال اساسی برای فهمیدن اینکه چگونه با قابلیت انتقال کار کنیم می‌آوریم.
ابتدا یک فایل HTML جدید، transition_simple.html با کد زیر ایجاد کنید.
مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
Simple transitions
در کد بالا عنصر body را انتخاب کردیم و پس از آن با فراخوانی متد ()transition شروع به انتقال می‌کنیم.
سپس، دستور دادیم رنگ پس زمینه را از رنگ فعلی،سفید به آبی روشن انتقال دهیم.
اکنون، مرورگر را تازه کرده و روی صفحه، رنگ پس زمینه از سفید به آبی روشن تغییر میکند.
اگر می‌خواهیم رنگ پس زمینه را از رنگ آبی به خاکستری تغییر دهیم، می‌توانیم از انتقال زیر استفاده کنیم.
مثال :
1
d3.select("body").transition().style("background-color", "gray");
کلام آخر
تاکید D3 بر استانداردهای وب، قابلیت‌های کامل مرورگرهای مدرن را به شما می‌دهد بدون اینکه نیاز باشد به یک چارچوب خاصی وصل شوید.
همچنین امکان ترکیب اجزای بصری قدرتمند و رسم Visualization‌های پر قدرت را به شما می‌دهد.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه نهم از آموزشهای دوره D3.js را با مبحث انیمیشن در D3.js آغاز می‌کنیم. D3.js توسط انتقال از انیمیشن پشتیبانی می‌کند. ما می‌توانیم انیمیشن را با استفاده مناسب متد انتقال انجام دهیم. انتقال یک نوع محدود شده فریم کلیدی انیمیشن در D3.js با دو فریم کلیدی همراه است: فریم شروع و پایان.همچنین با برخی متدها مانند متد ()delay در D3.js نیز آشنا خواهیم شد.
انیمیشن در D3.js
قالب اصلی شروع به طور معمول حالت فعلی DOM است، و قالب کلید پایانی مجموعهای از ویژگیها، سبکها و سایر ویژگیهایی است که شما مشخص می‌کنید.
انتقالها برای انتقال به یک سبک جدید بدون یک کد پیچیده مناسب هستند و این به دید اولیه بستگی دارد.
به عنوان مثال :اجازه دهید کد زیر را در صفحه “transition_color.html” در نظر بگیریم.
مثال :

در اینجا، رنگ پس زمینه سند از سفید به خاکستری روشن و سپس به خاکستری تغییر می‌کند.
متد ()The duration در D3.js
این متد صفات را به طور مساوی در طول مدت مشخص تغییر می‌دهد . اجازه دهید یک انتقال که ۵ ثانیه به طول می‌انجامد را مانند کد زیر بسازیم.
مثال :

>Simple transitions>

در اینجا، انتقال به صورت صاف و یکنواخت صورت گرفت. همچنین می‌توانیم مقدار کد رنگ RGB را مستقیما با استفاده از روش زیر تعیین کنیم.
مثال :
d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);
1
d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);
اکنون، هر کد رنگ به آرامی، صاف و یکنواخت از ۰ به ۱۵۰ می‌رود.
برای گرفتن ترکیب دقیق درون فریم یا قالب از مقدار قالب شروع به مقدار قالب پایه، D3.js از یک روش interpolate داخلی استفاده می‌کند.
که سینتکس آن در زیر آورده شده است :
مثال :
d3.interpolate(a, b)
1
d3.interpolate(a, b)
D3 همچنین از انواع interpolation زیر پشتیبانی می‌کند :
interpolateNumber : ارزشهای عددی را پشتیبانی می‌کند.
interpolateRgb :رنگها را پشتیبانی می‌کند.
interpolateString :رشته را پشتیبانی می‌کند.
ما می‌توانیم از متدهای interpolate به طور مستقیم برای به دست آوردن نتیجه مورد نظرمان استفاده کنیم. ما حتی می‌توانیم در صورت لزوم یک متد interpolate جدید ایجاد کنیم.
متد ()delay در D3.js
متد ()delay در D3.js اجازه می‌دهد تا پس از یک دوره زمانی خاص، انتقال رخ دهد.
کد زیر را در “transition_delay.html” در نظر بگیرید.
مثال :

>Simple transitions>

طول عمر انتقال
انتقال دارای یک چرخه عمر چهار مرحلهای است :
برنامه ریزی انتقال
شروع انتقال
اجرای انتقال
پایان انتقال
اجازه دهید با جزییات بیشتر به این مساله بپردازیم.
برنامه ریزی انتقال
زمانی که ایجاد می‌شود، یک انتقال برنامه ریزی شده است. هنگامی که selection.transition را فراخوانی می‌کنیم، ما یک انتقال را برنامه ریزی می‌کنیم.
این نیز زمانی است که ما ()attr ()، style و دیگرمتدهای انتقال را برای تعریف فریم کلید پایانی فراخوانی می‌کنیم.
شروع انتقال
شروع انتقال با توجه به تاخیر زمانی( delay) که برنامه ریزی شده مشخص می‌شود.
اگر تاخیر مشخص نشده باشد، پس از آن، شروع انتقال صورت می‌گیرد، که معمولا بعد از چند میلی ثانیه است.
همچنین اگر انتقال تاخیر داشته باشد، پس از شروع انتقال، مقدار شروع باید تنظیم شود.
ما می‌توانیم با گوش دادن به رویداد شروع این کار را انجام دهیم.
مثال :
d3.select("body")
.transition()
.delay(200)
.each("start", function() { d3.select(this).style("color", "green"); })
.style("color", "red");
1
2
3
4
5
d3.select("body")
.transition()
.delay(200)
.each("start", function() { d3.select(this).style("color", "green"); })
.style("color", "red");
اجرای انتقال
هنگامی که انتقال اجرا می‌شود، به طور مکرر با مقادیر انتقال از ۰ به ۱ فراخوانی می‌شود.
علاوه بر تاخیر و مدت زمان، انتقال نیز برای کاهش کنترل زمان انجام می‌شود.
کاهش زمان تحریف شده، مانند آهسته شدن و کم کردن سرعت.
برخی از توابع کاهش ممکن است به طور موقت مقادیر t را بیشتر از ۱ یا کمتر از ۰ بدهند.
پایان انتقال
زمان پایان دادن به انتقال همیشه دقیقا ۱ است، به طوری که مقدار پایانی دقیقا زمانی که انتقال به پایان می‌رسد تعیین می‌شود.
یک پایان انتقال بر اساس مجموع تاخیر و مدت آن است. وقتی گذار به پایان می‌رسد، رویداد نهایی ارسال می‌شود.
کلام آخر
آموزش انیمیشن در D3.js و متد ()delay در D3.js به پایان رسید. از آنجا که جاوا اسکریپت عموما به عنوان یک استاندارد برای توسعه محتوای وب پویا شناخته می‌شود، d3.js به ویژه برای ساخت گرافیک تعاملی از منبع دادهها مفید است. در جلسه بعد کشیدن نمودار در D3.js به شما عزیزان آموزش داده خواهد شد.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در این جلسه از آموزشهای دوره D3.js به نحوه رسم نمودار در D3.js می‌پردازیم. نمودار یک روش نمایش گرافیکی برای داده‌ها است. انواع مختلفی از نمودارها وجود دارند که هر کدام برای کاربردهای خاصی مناسب هستند. D3.js برای ایجاد نمودار SVG به صورت استاتیک استفاده می‌شود. همچنین به ما کمک می‌کند تا برخی از نمودارها مانند نمودار خطی و نمودار دایرهای در D3.js و … را رسم کنیم.
انواع نمودار در D3.js
ما می‌توانیم انواع مختلفی از رسم نمودار در D3.js را داشته باشیم :
نمودار میله ای
نمودار دایره ای
نمودار دایره ای(نوع دوم)
نمودار گرد
نمودار خطی
نمودار حبابی و …
در مورد رسم نمودار در D3.js توضیحاتی داده شده است. بگذارید هر یک از این نمودارها را با جزئیات بیاموزیم.
نمودار میله ای
نمودارهای میلهای یکی از رایج‌ترین انواع رسم نمودار در D3.js هستند و برای نمایش و مقایسه اعداد، فرکانس یا سایر مقادیر (به عنوان مثال میانگین) برای دستهها یا گروههای گسسته استفاده می‌شود.
این نمودار به گونهای ساخته شده است که ارتفاع یا طول میلههای مختلف متناسب با اندازه دستهای هستند که آنها مدیریت می‌کنند.
محور x (محور افقی) دستههای مختلفی را نشان می‌دهد که مقیاس ندارند.
محور y (محور عمودی) دارای یک مقیاس است و نشان دهنده واحدهای اندازه گیری است.
میلهها می‌توانند به صورت عمودی یا افقی بسته به تعداد دستهها و طول یا پیچیدگی دسته بندی شوند.
رسم یک نمودار میله ای
اجازه دهید با استفاده از D3 یک نمودار میلهای را در SVG ایجاد کنیم.
برای مثال، می‌توانیم از عناصر rect برای میلهها و عناصر متن برای نشان دادن مقادیر دادههای مربوط به میلهها استفاده کنیم.
با استفاده از D3 برای ایجاد یک نمودار میلهای در SVG، باید مراحل زیررا دنبال کنید.
مرحله ۱ : افزودن سبک در عنصر مستطیل، اجازه دهید سبک زیر را به عنصر مستطیل اضافه کنیم.
مثال :
svg rect {
fill: gray;
}
1
2
3
svg rect {
fill: gray;
}
مرحله ۲ : اضافه کردن سبک در عنصر متن، اضافه کردن کلاس CSS زیر برای اعمال سبک به مقادیر متن. این سبک را به عنصر متن SVG اضافه کنید.
مثال :
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
1
2
3
4
5
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
اینجا، برای اعمال رنگ پر می‌شود. Text-anchor برای قرار دادن متن در انتهای سمت راست نوارها استفاده می‌شود.
مرحله ۳ : تعریف متغیرها، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. همانطور که در زیر توضیح داده شده است.
مثال :

1
2
3
4
5
6

در این مثال :
Width : عرض SVG است.
Scalefactor : مقیاس بندی یک مقدار به پیکسل است که روی صفحه نمایش قابل مشاهده است.
Barheight : ارتفاع استاتیک از میلههای افقی است.
مرحله ۴ – اضافه کردن عناصر SVG، اجازه دهیدبا استفاده از کد زیر عناصر SVG را در D3 اضافه کنیم.
مثال :
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
1
2
3
4
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
در اینجا، ابتدا بدنه سند را انتخاب کرده، و سپس یک عنصر جدید SVG را ایجاد و آن را اضافه می‌کنیم.
پس از اینکه گراف نواری مان را در عنصر SVG ساختیم. عرض و ارتفاع SVG را تنظیم کنید. ارتفاع برابر است با : ارتفاع نوار * تعداد مقادیر داده .
ما ارتفاع نوار را ۳۰ گرفته ایم و طول آرایه داده ۴ است. پس ارتفاع SVG به این صورت محاسبه می‌شود : ارتفاع ۳۰*۴ که برابر۱۲۰ پیکسل است.
مرحله ۵ : اعمال تغییرات. اجازه دهید تغییرات در نوار را با استفاده از کد زیر اعمال کنیم.
مثال :
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
1
2
3
4
5
6
7
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
هر نوار در داخل مربوط به یک عنصر است. بنابراین، ما عناصر گروه را ایجاد می‌کنیم.
هر یک از عناصر گروه باید در یک زیر صفحه دیگر قرار بگیرد تا یک نمودار نوار افقی ایجاد شود.
فرمول انتقال به صورت کلی می‌شود : (فهرست)index * (ارتفاع نوار)bar height
مرحله ۶ : عناصر rect را به نوار اضافه کنید :
در مرحله قبل، عناصر گروه را اضافه کردیم. حالا عناصر rect را به نوار با استفاده از کد زیر اضافه کنید.
مثال :
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
1
2
3
4
5
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
عرض برابر با : (مقدار داده * مقیاس عامل) و ارتفاع (ارتفاع نوار – حاشیه) است.
مرحله ۷ : نمایش اطلاعات – این آخرین مرحله است. بگذارید دادهها را در هر نوار با استفاده از کد زیر نمایش دهیم.
مثال :
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
1
2
3
4
5
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
عرض به عنوان (مقدار داده * scalefactor) تعریف می‌شود. عناصر متن، پوسته یا حاشیه را پشتیبانی نمیکنند.
به همین دلیل ما نیاز به offset با نام “Dy” داریم. این مورد برای تنظیم کردن متن به صورت عمودی استفاده می‌شود.
مرحله ۸ : نحوه کار کردن مثال، لیست کد کامل در بلوک کد زیر نمایش داده می‌شود. یک صفحه وب barcharts.html ایجاد کنید و تغییرات زیر را اضافه کنید.
barcharts.html
مثال :






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50






یک درخواست به مرورگر خود بدهید، پاسخ زیر را خواهید دید.
رسم نمودار در D3.js
نمودار دایرهای در D3.js
نمودار دایرهای یک گرافیک آماری دایرهای است که به شکلی تقسیم می‌شود تا نسبت عددی را نشان دهد.
رسم یک نمودار دایره ای
اجازه دهید یک نمودار دایرهای را در SVG با استفاده از D3 ایجاد کنیم. برای انجام این کار، ما باید به مراحل زیر پیروی کنیم :
مرحله ۱ : تعریف متغیرها، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. این کار در بلوک کد زیر نشان داده شده است.
مثال :

1
2
3
4
5
6

در اینجا :
Width : عرض SVG است.
Height : ارتفاع SVG است.
Data : آرایهای از عناصر داده می‌باشد.
Colors : رنگها را به عناصر دایره اعمال می‌کند.
مرحله ۲ : اضافه کردن عناصر SVG،اجازه دهید عناصر SVG را در D3 با استفاده از کد زیر اضافه کنیم.
مثال :
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
1
2
3
4
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
مرحله ۳ : اعمال تغییرات، اجازه دهید تغییرات را در SVG با استفاده از کد زیر اعمال کنیم.
مثال :
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
1
2
3
4
5
6
7
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
(“var g = svg.selectAll (“g : عنصر گروه برای نگه داشتن حلقهها ایجاد می‌کند.
(data (data : آرایه دادههای ما را به عناصر گروه متصل می‌کند.
()enter : متغیرهایی را برای عناصر گروه ایجاد می‌کند.
(:”append (“g: عناصر گروه را به صفحه اضافه می‌کند.
مثال :
.attr("transform", function(d, i) {
return "translate(0,0)";
})
1
2
3
.attr("transform", function(d, i) {
return "translate(0,0)";
})
در این قسمت، translate برای موقعیت عناصر با توجه به مبدأ استفاده می‌شود.
مرحله ۴ : عناصر دایره را اضافه کنید . اکنون با استفاده از کد زیر عناصر دایره را به گروه اضافه کنید.
مثال :
g.append("circle")
1
g.append("circle")
سپس، با استفاده از کد زیر، صفات را به گروه اضافه کنید.
مثال :
.attr("cx", function(d, i) {
return i*75 + 50;
})
1
2
3
.attr("cx", function(d, i) {
return i*75 + 50;
})
در اینجا ما از مختصات x از مرکز هر حلقه استفاده می‌کنیم. شاخص دایره را با ۷۵ ضرب می‌کنیم و به دایرهها پدینگ ۵۰ را اضافه می‌کنیم.
سپس، مختصات y را از مرکز هر حلقه تنظیم می‌کنیم.
اینکار برای پوشاندن تمام حلقهها استفاده می‌شود و کد آن در زیر تعریف شده است.
مثال :
.attr("cy", function(d, i) {
return 75;
})
1
2
3
.attr("cy", function(d, i) {
return 75;
})
اکنون، شعاع هر دایره را تنظیم کنید.
مثال :
.attr("r", function(d) {
return d*1.5;
})
1
2
3
.attr("r", function(d) {
return d*1.5;
})
شعاع با مقدار داده ضرب می‌شود و ثابت “۱٫۵” برای افزایش اندازه دایره است. در آخر، با استفاده از کد زیر رنگها را برای هر حلقه اختصاص می‌دهیم.
مثال :
.attr("fill", function(d, i){
return colors[i];
})
1
2
3
.attr("fill", function(d, i){
return colors[i];
})
مرحله ۵ : نمایش اطلاعات، این آخرین مرحله است. با استفاده از کد زیر، دادهها در هر حلقه نمایش داده می‌شوند.
مثال :
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});
1
2
3
4
5
6
7
8
9
10
11
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});
مرحله ۶ : عملکرد مثال، لیست کد کامل در بلوک کد زیر نمایش داده می‌شود.
یک صفحه وب circlecharts.html ایجاد کنید و تغییرات زیر را در آن اضافه کنید.
circlecharts.html
مثال :




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58




با فرستادن درخواست به مرورگر خود نمودار زیرا مشاهده خواهید کرد.نمودار دایرهای در D3.js
نمودار دایره ای(نوع دوم)
نمودار دایرهای یک نمودار ویژه است که از قطاع‌های دایره‌ای برای نشان دادن اندازه نسبی داده‌ها استفاده می‌کند.
ساده‌ترین تمثیل برای نمودار دایره‌ای، تشبیه آن به یک پیتزا است.
بدین ترتیب می‌توانید قا‌چ‌های پیتزا را قطاع‌های نمودار در نظر بگیرید. برای توضیح بیشتر مثالی را در ادامه ارائه کرده‌ایم.
رسم یک نمودار دایرهای در D3.js
قبل از شروع به رسم نمودار دایرهای در D3.js، ما باید دو متد زیر را یاد بگیریم : متد ()d3.arc و متد ()d3.pie .
اجازه دهید هر دو روش را با جزئیات توضیح دهیم.
متد ()d3.arc
متد ()d3.arc قوس(arc) را تولید می‌کند. شما به تنظیم شعاع داخلی و شعاع بیرونی برای قوس نیاز دارید.
اگر شعاع داخلی ۰ باشد، نتیجه یک نمودار دایرهای در D3.js خواهد بود، در غیر این صورت نتیجه یک نمودار دوناتی است که در بخش بعدی بحث شده است.
متد ()d3.pie
این متد برای تولید یک نمودار دایرهای در D3.js استفاده می‌شود.
یک داده از مجموعه دادهها را می‌گیرد و زاویه شروع و زاویه پایان برای هر گره نمودار دایره را محاسبه می‌کند.
با استفاده از مراحل زیر یک نمودار دایرهای بسازید.
مرحله ۱ : اعمال سبک – اجازه دهید سبک زیر را به عنصر arc(قوس) اعمال کنیم.
مثال :
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
fill برای اعمال رنگهاست. text-anchor موقعیت متن را از مرکز arc تعیین می‌کند.
مرحله ۲ : تعریف متغیرها، تعریف متغیرها در اسکریپت زیر نشان داده شده است.
مثال :

1
2
3
4
5
6

Width : عرض SVG است.
Height : ارتفاع SVG است.
Radius : با استفاده از تابع Math.min محاسبه می‌شود. ۲/(عرض، ارتفاع) ؛
مرحله ۳ : اعمال تغییرات، تغییرات در SVG را با استفاده از کد زیر اعمال کنید.
مثال :
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
1
2
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
حالا رنگها را با استفاده از تابع d3.scaleOrdinal به صورت زیر وارد کنید.
مثال :
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
1
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
مرحله ۴ : ساخت نمودار دایره ای، یک نمودار دایرهای را با استفاده از تابع ارائه شده زیر تولید کنید.
مثال :
var pie = d3.pie()
.value(function(d) { return d.percent; });
1
2
var pie = d3.pie()
.value(function(d) { return d.percent; });
شما می‌توانید مقادیر درصد را تعیین کنید. یک تابع برای بازگشت d.percent لازم است و آن را به عنوان مقدارpie تعیین می‌کند.
مرحله ۵ : تعریف arcs، پس از ایجاد نمودار دایره ای،برای هر pie wedges یک arc با استفاده از تابع زیر داده شده تعریف کنید.
مثال :
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(0);
1
2
3
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(0);
arc به عناصر مسیر تنظیم می‌شود. شعاع محاسبه شده با outerradius تنظیم شده است، در حالی که innerradius به ۰ تنظیم شده است.
مرحله ۶ : برچسبها را درwedges اضافه کنید : با ارائه شعاع، برچسبها را در حلقهها قرار دهید.کدها به شرح زیر تعریف شده است.
مثال :
var label = d3
.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
1
2
3
4
var label = d3
.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
مرحله ۷ : خواندن دادهها یک گام مهم است. ما می‌توانیم دادهها را با استفاده از تابع داده شده در زیر بخوانیم.
مثال :
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});
1
2
3
4
5
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});
populations.csv شامل فایل داده است. تابع d3.csv اطلاعات از مجموعه داده را می‌خواند.
اگر دادهها وجود نداشته باشد، یک خطا برگردانده می‌شود. ما می‌توانیم این فایل را در مسیر D3 خود قرار دهیم.
مرحله ۸ : بارگذاری داده، گام بعدی بارگذاری دادهها با استفاده از کد زیر است :
مثال :
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
1
2
3
4
5
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
در اینجا می‌توانیم دادهها را به عناصر گروه برای هر یک از مقادیر داده از مجموعه داده اختصاص دهیم.
مرحله ۹ : افزودن مسیر،اکنون، مسیر را اضافه کنید و همانطور که در زیر نشان داده شده است، کلاس ‘arc’ را به گروهها اختصاص دهید.
مثال :
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });
1
2
3
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });
fill برای اعمال رنگ دادههاست. از تابع d3.scaleOrdinal گرفته شده است.
مرحله ۱۰ : اضافه کردن متن، برای نمایش متن در برچسب می‌توان از کد زیر استفاده کرد.
مثال :
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
1
2
3
4
5
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
عنصر SVG text برای نمایش متن در برچسبها استفاده می‌شود.
الگویی که قبلا ایجاد کردیم با استفاده از ()d3.arc یک نقطه مرکزی را نشان می‌دهد، که موقعیتی برای برچسب است.
در نهایت، دادهها را با استفاده از d.data.browser ارائه می‌کنیم.
مرحله ۱۱ : افزودن عناصر گروهی، صفات عناصر گروه را اضافه کنید و عنوان class را برای رنگ متن بفرستید .
آن را به صورت ایتالیک(مورب) قرار دهید، همانطورکه در مرحله ۱ مشخص شده است و در زیر تعریف شده است.
مثال :
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")
1
2
3
4
5
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")
مرحله ۱۲ : عملکرد مثال، برای رسم نمودار، می‌توانیم مجموعهای از جمعیت هند را جمع کنیم.
این مجموعه دادهها جمعیت در یک وب سایت ساختگی را نشان می‌دهد، که به شرح زیر تعریف شده است.
population.csv
مثال :
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0
1
2
3
4
5
6
7
8
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0
اکنون اجازه دهید نمودار دایرهای را برای مجموعه دادهها ایجاد کنیم.یک صفحه وب “piechart.html” ایجاد کنید و کد زیر را در آن اضافه کنید.
مثال :




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78




نمودار دایرهای در D3.js
نمودار دوناتی
نمودار دونات فقط یک نمودار پایه ساده با یک حفره در داخل است.
ما می‌توانیم شعاع حفره را به اندازهای که نیاز دارید تعریف کنیم، با واحدهای درصد یا پیکسل.
همچنین ما می‌توانیم یک نمودار دونات را به جای نمودار دایرهای ایجاد کنیم.
شعاع داخلی قوس( arc) را تغییر دهید تا مقدار بیشتری از صفر استفاده شود.
مثال :
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(100);
1
2
3
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(100);
همانند نمودار دایرهای و با شعاع داخلی کمی تغییر یافته، می‌توانیم یک نمودار دونات ایجاد کنیم.
یک صفحه وب dounutchart.html ایجاد کنید و تغییرات زیر را در آن اضافه کنید.
Donutchart.html
مثال :




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78




در اینجا متغیر path را به صورت زیر تغییر دادیم:
مثال :
var path = d3.arc()
.outerRadius(radius)
.innerRadius(100);
1
2
3
var path = d3.arc()
.outerRadius(radius)
.innerRadius(100);
مقدار internalRadius> 0 را برای ایجاد یک نمودار دونات تنظیم می‌کنیم.
در نهایت، با فرستادن درخواست در مرورگرما می‌توانیم پاسخ زیر را مشاهده کنیم.
کلام آخر
رسم نمودار در D3.js راه حل خوبی برای نمایش اندازه‌های مرتبط با هم است. به طور فرضی توسط نمودار با یک نگاه می‌توان فهمید کدام سبک فیلم بیشتر از همه و کدام کمتر از همه مورد پسند بوده است. شما نیز می‌توانید برای داده‌های خودتان نمودارهای مختلفی را رسم کنید. آموزش رسم نمودار در D3.js به پایان رسید با ما همراه باشید تا در جلسه بعد با گرافها در این فریم ورک آشنا شوید.
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن،جلسهای دیگر از آموزشهای دوره D3.js را با مبحث کاربرد گرافها در D3.js آغاز می‌کنیم.یک گراف فضای مسطح دو بعدی است که مانند یک مستطیل نمایان می‌شود. Graph دیتا استراکچری است که به منظور مدل‌سازی مجموعه‌ای از اشیاء و ارتباطات مابین آن‌ها مورد استفاده قرار می‌گیرد .
گرافها در D3.js
گرافها در D3.js دارای فضای مختصاتی هستند که در آن x = 0 و y = 0 مختصات در پایین سمت چپ قرار دارد.
با توجه به فضای مختصات کارتیزن ریاضی، نمودارها مختصات X را از چپ به راست افزایش می‌دهند و مختصات Y از پایین به بالا رشد می‌کنند.
وقتی در مورد طراحی یک دایره با مختصات x = 30 و y = 30 صحبت می‌کنیم :
۳۰ واحد از پایین به سمت چپ به راست و سپس ۳۰ واحد از پایین به بالا حرکت می‌کنیم.
فضای مختصات SVG
فضای مختصات SVG به همان شیوهای عمل می‌کند که یک فضای مختصات گراف ریاضی کار می‌کند.
به جز دو ویژگی مهم که به آن اضافه شده است :
فضای مختصات SVG دارای x = 0 و y = 0 مختصات در سمت چپ قسمت بالا قرار دارد.
فضای مختصات SVG مختصات Y از بالا به پایین در حال رشد است.
گراف فضای مختصات SVG
وقتی ما در مورد طراحی یک دایره با مختصاتهای x = 30 و y = 30 در فضای مختصات SVG صحبت میکنیم در واقع :
۳۰ واحد از بالا به سمت چپ به سمت راست و سپس ۳۰ واحد به پایین میرسیم.
این تعریف در مثال زیر شرح داده شده است.
مثال :
var svgContainer = d3
.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);
1
2
3
4
5
var svgContainer = d3
.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);
در نظر بگیرید، عنصر SVG به عنوان یک گراف ۲۰۰ واحد عرض و ۲۰۰ واحد ارتفاع است.
اکنون می‌دانیم که مختصات صفر X و Y در سمت چپ بالا هستند.
ما هم اکنون می‌دانیم که مانند مختصات Y رشد می‌کند، و از بالا به پایین گراف حرکت می‌کند.
شما می‌توانید عناصر SVG را به صورت زیر نشان دهید.
مثال :
var svgContainer = d3
.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.style("border", "1px solid black");
1
2
3
4
5
var svgContainer = d3
.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.style("border", "1px solid black");
مثال کاربرد گرافها در D3.js
اجازه دهید نمونهای از گراف خطی را در نظر بگیریم. Line Graph همان گراف خطی است و برای تجسم مقدار چیزی در طول زمان استفاده می‌شود.
همچنین مقایسه دو متغیر را مشخص می‌کند. هر متغیر در امتداد محور قرار گرفته است.
یک گراف خطی دارای یک محور عمودی و یک محور افقی است.
در این مثال از کاربرد گرافها در D3.js، می‌توانیم سوابق فایل CSV را به عنوان رشد جمعیت هند در سالهای ۲۰۰۶ تا ۲۰۱۷ به ثبت برسانیم.
ابتدا یک data.csv ایجاد کنید تا رکوردهای جمعیت نشان داده شود.
یک فایل CSV جدید در پوشه D3 خود ایجاد کنید :
مثال :
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
1
2
3
4
5
6
7
8
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
اکنون فایل را ذخیره کرده و مراحل زیر را برای رسم یک نمودار خطی در D3 انجام دهید.
ما همه مراحل را قدم به قدم و با جزییات پیش می‌بریم.
مرحله ۱ : افزودن سبک، اجازه دهید یک سبک به کلاس خطی با استفاده از کد زیر داده شود.
مثال :
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
1
2
3
4
5
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
مرحله ۲ : تعریف متغیرها، ویژگیهای SVG در زیر تعریف شده اند.
مثال :
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
1
2
3
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
ابتدا، چهار حاشیه را تعریف می‌کنیم که بلوکهایی را که در گراف قرار دارند را احاطه کند.
مرحله ۳ : تعریف خط، یک خط جدید را با استفاده از تابع ()d3.line که در زیر نشان داده شده است، رسم کنید.
مثال :
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.population); });
1
2
3
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.population); });
در اینجا، Year نشان دهنده دادهها در رکوردهای محور X است و population به دادهها در محور Y اشاره می‌کند.
مرحله ۴ : اضافه کردن ویژگیهای SVG، اضافه کردن ویژگیهای SVG و عناصر گروه با استفاده از کد زیر صورت می‌گیرد.
مثال :
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
1
2
3
4
5
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
در اینجا، ما عناصر گروه را اضافه کرده و تغییرات را اعمال کردیم.
مرحله ۵ : خواندن دادهها،اکنون می‌توانیم دادهها را از قسمت data.csv دادههایمان بخوانیم.
مثال :
d3.csv("data.csv", function(error, data) {
if (error) throw error;
}
1
2
3
d3.csv("data.csv", function(error, data) {
if (error) throw error;
}
در اینجا data.csv موجود نیست، پس با خطا مواجه می‌شود.
مرحله ۶ : فرمت کردن داده، اکنون دادهها را با استفاده از کد زیر قالب بندی کنید.
مثال :
data.forEach(function(d) {
d.year = d.year;
d.population = +d.population;
});
1
2
3
4
data.forEach(function(d) {
d.year = d.year;
d.population = +d.population;
});
کد فوق تضمین می‌کند که تمام مقادیری که از فایل CSV خارج می‌شوند، به درستی مرتب شده و قالب بندی می‌شوند.
هر ردیف شامل دو مقدار است: یک مقدار برای سال و دیگری برای جمعیت.
این تابع یک مقدار سطر “year” و “population” را یک بار و در یک زمان می‌گیرد.
مرحله ۷ : تنظیم مقیاس محدوده، پس از قالب بندی داده، شما می‌توانید محدوده مقیاس برای X و Y را تنظیم کنید.
مثال :
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
1
2
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
مرحله ۸ : مسیر را اضافه کنید، همانطور که در پایین نشان داده شده است مسیر و دادهها را اضافه کنید.
مثال :
svg.append("path").data([data])
.attr("class", "line").attr("d", valueline);
1
2
svg.append("path").data([data])
.attr("class", "line").attr("d", valueline);
مرحله ۹ : اضافه کردن محور X، حالا شما می‌توانید محور X را با استفاده از کد زیر اضافه کنید.
مثال :
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
1
2
3
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
مرحله ۱۰ :اضافه کردن محور Y، ما می‌توانیم محور Y را همانطور که در زیر نشان داده شده است به گروه اضافه کنیم .
مثال :
svg.append("g")
.call(d3.axisLeft(y));
1
2
svg.append("g")
.call(d3.axisLeft(y));
مرحله ۱۱: عملکرد مثال، کد کامل در بلوک کد زیر داده شده است.
یک صفحه وب ساده linegraphs.html را ایجاد کرده و تغییرات زیر را به آن اضافه کنید.
graph.html
مثال :

اکنون درخواست از مرورگر فرستاده و در نهایت نتیجه زیر را خواهیم دید.کاربرد گرافها در D3.js
کلام آخر
آموزش کاربرد گرافها در D3.js به اتمام رسید، امیدوارم از مطالب ذکر شده بهره مند شده باشید. با ما همراه باشید تا در جلسه بعد جغرافیا در D3.js را فرا بگیرید.
این پست را ارزیابی کنید
جلسه ۱۲ : جغرافیا در D3.js
جلسه ۱۰ : رسم نمودار در D3.js
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه دوازدهم از آموزشهای دوره D3.js به جغرافیا در D3.js اختصاص داده می‌شود. مختصات جغرافیایی در D3.js اغلب برای دادههای هواشناسی یا جمعیت استفاده می‌شود.
جغرافیا در D3.js
به طور کلی جغرافیا در D3.js سه ابزار برای دادههای جغرافیایی به ما می‌دهد:
مسیرها : پیکسلهای نهایی را تولید می‌کنند.
طرحها : مختصات حوزه را به مختصات دکارتی تبدیل می‌کنند.
Streams :کارها را سریع می‌کنند.
قبل از یادگیری مختصات جغرافیایی در D3.js، ما باید دو اصطلاح زیر را فرا بگیریم.
مسیر جغرافیایی D3 و طرحها
بگذارید در مورد این دو اصطلاح به طور مفصل بحث کنیم.
مسیر جغرافیایی D3
ژنراتور مسیر جغرافیا در D3.js است. GeoJSON یک مسیر داده SVG را ایجاد می‌کند یا مسیر را به یک Canvas ارایه می‌دهد.
Canvas(بوم) برای طرحهای پویا یا تعاملی برای بهبود عملکرد توصیه می‌شود. برای تولید یک ژنراتور داده جغرافیایی D3، می‌توانید تابع زیر را فراخوانی کنید.
()d3.geo.path در اینجا، تابع ژنراتور مسیر ()d3.geo.path به ما امکان می‌دهد که هر کدام از نقشه طرحی را که می‌خواهیم برای ترجمه از مختصات جغرافیایی به مختصات دکارتی استفاده کنیم انتخاب کنیم.
به عنوان مثال، اگر ما بخواهیم جزئیات نقشه هند را نشان دهیم، می‌توانیم یک مسیر را که در زیر نشان داده شده تعریف کنیم.
مثال :
ar path = d3.geo.path()
svg.append("path")
.attr("d", path(states))
1
2
3
ar path = d3.geo.path()
svg.append("path")
.attr("d", path(states))
طرحها
طرحها هندسه چند ضلعی کروی را به هندسه چند ضلعی مسطح تبدیل می‌کند. D3 پیاده سازی طرح ریزی زیر را فراهم می‌کند.
پروژه طرحهای Azimuthal حوزه را مستقیما بر روی یک برنامه قرار می‌دهد.
Composite : کامپوزیت متشکل از پیش بینیهای چندگانه است که به یک صفحه نمایش متصل می‌شوند.
مخروطی : حوزه را بر روی مخروطی پروژه می‌کند و سپس مخروط را روی برنامه باز می‌کند.
برای ایجاد یک طرح جدید، می‌توانید از تابع زیر استفاده کنید.
مثال :
d3.geoProjection(project)
1
d3.geoProjection(project)
طرح جدیدی را از پروژه طرح شده خام مشخص شده تهیه می‌کند. تابع پروژه طول و عرض جغرافیایی یک نقطه را در رادیان می‌گیرد.
سپس شما می‌توانید طرح پیشنهادی را در کد خود اعمال کنید.
مثال :
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
1
2
3
4
5
6
7
8
9
10
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
در اینجا می‌توانیم هر یک از طرحهای بالا را اعمال کنیم. اجازه دهید هر یک از این طرحها را به صورت مختصر توضیح دهیم.
()d3.geo.orthographic : طرح ارتجاعی یک طرح آزیموتیک مناسب برای نمایش یک نیمکره مجزا است. نقطه نظر در بی نهایت است.
()d3.geo.gnomonic : طرح gnomonic یک طرح azimuthal است که حلقههای بزرگ را به صورت خطوط مستقیم طراحی می‌کند.
()d3.geo.equirectangular : معادل ساده‌ترین طرح جغرافیایی ممکن است.
()d3.geo.mercator : طرح Mercator کروی معمولا توسط کتابخانههای نقشه برداری کاشی استفاده می‌شود.
()d3.geo.transverseMercator : طرح ریزی mercator عرضی است.
مثال کاربردی
بگذارید نقشه هند را در این مثال ایجاد کنیم. برای انجام این کار، ما باید مراحل زیر را طی کنیم.
مرحله ۱ : اعمال سبکها، با استفاده از کد زیر، سبکها را در نقشه اضافه کنید.
مثال :

1
2
3
4
5
6
7
8
9
10
11

در این مثال، ما رنگهای خاصی برای TN، AP و MP اعمال کردیم.
مرحله ۲ : شامل اسکریپت topojson – TopoJSON و فرمت GeoJSON است که نوعی کدگذاری توپولوژی است، و در کد زیر تعریف شده است.
مثال :

1

ما می‌توانیم این اسکریپت را در کدهای برنامه نویسی مان وارد کنیم.
مرحله ۳ : تعریف متغیرها، با استفاده از کد زیر، متغیرها را در اسکریپت خود اضافه کنید.
مثال :
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);
1
2
3
4
5
6
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);
در اینجا عرض SVG برابر۶۰۰ و ارتفاع آن برابر ۴۰۰ است. صفحه نمایش یک فضای دو بعدی است و ما در حال تلاش برای ارائه یک شی سه بعدی هستیم.
بنابراین، با استفاده از تابع ()d3.geo.mercator، می‌توانیم به شدت اندازه زمین / شکل زمین را تحریف کنیم.
مرکز با مختصات [۷۸، ۲۲] مشخص شده است، همچنین مرکز طرح شده را به محل مشخص شده به عنوان یک آرایه دو عنصر طول و عرض جغرافیایی در درجه بندی می‌کند و طرح را بر می‌گرداند.
در اینجا نقشه بر روی ۷۸ درجه غرب و ۲۲ درجه شمالی قرار دارد.مقیاس به عنوان ۶۸۰ مشخص شده است، این مقدار عامل مقیاس پروژکتور را به مقدار مشخص شده تنظیم می‌کند.
اگر مقیاس مشخص نشده باشد، عامل مقیاس فعلی را که به صورت پیش فرض به ۱۵۰ می‌رسد، باز می‌گرداند. لازم به ذکر است که عوامل مقیاس در طرحهای سازگار نیستند.
مرحله ۴ : اضافه کردن SVG، حالا ویژگیهای SVG را اضافه کنید.
مثال :
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
1
2
3
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
مرحله ۵ : ایجاد مسیر، کد زیر مسیر جغرافیایی جدیدی را می‌سازد.
مثال :
var path = d3.geo.path()
.projection(projection);
1
2
var path = d3.geo.path()
.projection(projection);
در اینجا ژنراتور مسیر ( ()d3.geo.path ) برای مشخص کردن یک نوع طرح (projection.) استفاده می‌شود، که قبلا به عنوان یک طرح Mercator با استفاده از طرح متغیر تعریف شده است.
مرحله ۶ : تولید دادهها، indiatopo.json – این فایل شامل پروندههای زیادی است که ما می‌توانیم از پیوستهای زیر به راحتی دانلود کنیم.
فایل indiatopo.json را دانلود کنید .
پس از دانلود فایل، می‌توانیم محل D3 خود را اضافه کنیم. فرمت نمونه در زیر نشان داده شده است.
مثال :
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................
مرحله ۷ : رسم نقشه، اکنون دادهها را از فایل indiatopo.json بخوانید و نقشه را رسم کنید.
مثال :
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});
1
2
3
4
5
6
7
8
9
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});
در اینجا، فایل TopoJSON را با مختصات نقشه هند (indiatopo.json) بارگذاری می‌کنیم.
سپس اعلام می‌کنیم که ما بر روی تمام عناصر مسیر در گرافیک عمل می‌کنیم. این به عنوان، (“g.selectAll(“path تعریف شده است.
سپس اطلاعاتی را که کشورها را از فایل TopoJSON تعریف می‌کنیم، کشف می‌کنیم.
مثال :
.data(topojson.object(topology, topology.objects.states)
.geometries)
1
2
.data(topojson.object(topology, topology.objects.states)
.geometries)
در نهایت، ما آن را به دادههایی که ما با استفاده از متد ()enter. نمایش می‌دهیم اضافه می‌کنیم و سپس آن دادهها را به عنوان عناصر مسیر با استفاده از متد (“append(“path. اضافه می‌کنیم.
کلام آخر
آموزش جغرافیا در D3.js و مختصات جغرافیایی در D3.js به اتمام رسید . در جلسه بعد API آرایه در D3.js را فرا خواهید گرفت.
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه سیزدهم از آموزشهای دوره D3.js را به مبحث API آرایه در D3.js می‌پردازیم. D3 شامل مجموعهای از ماژولها است. شما می‌توانید هر یک از ماژول را مستقل یا به صورت مجموعهای از ماژولها برای انجام عملیات استفاده کنید. این فصل در مورد API آرایه و همچنین آرایه تغییر API در D3.js توضیح داده شده است.
API آرایه در D3.js
آرایه چیست؟
یک آرایه حاوی مجموعه تکراری ثابت از عناصر با همان نوع است. آرایه برای ذخیره مجموعهای از دادهها استفاده می‌شود،و بهتر است که نوع دادهها یکسان باشد.
پیکربندی API آرایه در D3.js
شما به راحتی می‌توانید API آرایه در D3.js را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :




1
2
3
4
5




متدهای API اماری آرایه
در زیر برخی از مهمترین متدهای API اماری آرایه معرفی شده اند.
(آرایه)d3.min
(آرایه)d3.max
(آرایه)d3.extent
(آرایه)d3.sum
(آرایه)d3.mean
(آرایه)d3.quantile
(آرایه)d3.variance
(آرایه)d3.deviation
بگذارید هر یک از این موارد را به طور مفصل در مورد آن بحث کنیم.
(آرایه)d3.min
این متد حداقل مقدار را در آرایه داده شده با استفاده از دستور طبیعی(natural) به دست می‌آورد.
مثال : اسکریپت زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : اسکریپت فوق حداقل مقدار را در آرایه ۲۰ در کنسول خود به دست می‌آورد.
(آرایه)d3.max
این متد حداکثر مقدار را در یک آرایه داده می‌دهد.
مثال : اسکریپت زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : کد اسکریپت بالا حداکثر مقدار را در آرایه (۱۰۰) در کنسول خود نشان می‌دهد.
(آرایه)d3.extent
این متد حداقل و حداکثر مقدار را در آرایه داده شده به دست می‌آورد.
مثال : اسکریپت زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : اسکریپت بالا مقدار[۲۰،۱۰۰] را باز می‌گرداند .
(آرایه)d3.sum
این متد مقدار مجموع آرایهای از اعداد را باز می‌گرداند. اگر آرایه خالی باشد، ۰ بازگشت داده می‌شود.
مثال زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : اسکریپت فوق مقدار جمع که ۳۰۰ است را بر میگرداند.
(آرایه)d3.mean
این متد مقدار میانگین آرایهای از اعداد را باز می‌گرداند.
مثال زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه ” اسکریپت فوق مقدار میانگین که برابر ۶۰ شده است را بر می‌گرداند. همچنین می‌توانید مقدار متوسط را بررسی کنید.
(آرایه)d3.quantile
این متد p-quantile مجموعهای از ارقام طبقه بندی شده آرایه را باز می‌گرداند، جایی که p یک عدد در محدوده [۰، ۱] است.
به عنوان مثال، میانگین را می‌توان با استفاده از p = 0.5 تعیین کرد، اولین چارک در p = 0.25 و سومین چارک در p = 0.75 محاسبه می‌شود. این پیاده سازی از متد R-7، از زبان برنامه نویسی پیش فرض R و اکسل استفاده می‌کند.
مثال زیر را در نظر بگیرید.
مثال :
var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100
1
2
3
4
var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100
به همین ترتیب شما می‌توانید مقادیر دیگر را نیز چک کنید.
(آرایه)d3.variance
این متد واریانس آرایهای از اعداد را نشان می‌دهد.
مثال :اسکریپت زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : اسکریپت فوق واریانس را به عنوان ۱۰۰۰ باز می‌گرداند.
(آرایه)d3.deviation
این متد انحراف معیار آرایه داده شده را باز می‌گرداند. اگر آرایه کمتر از دو مقدار داشته باشد، آن را به عنوان undefined باز می‌گرداند.
مثال زیر را در نظر بگیرید.
مثال :

1
2
3
4

نتیجه : اسکریپت فوق، مقدار انحراف معیار ۳۱٫۶۲۲۷۷۶۶۰۱۶۸۳۷۹۳ را باز می‌گرداند.
مثال : اجازه دهید ما تمام متدهای آرایه API که در بالا ذکر شده با استفاده از اسکریپت زیر انجام دهیم.
ابتدا یک صفحه وب “array.html” ایجاد و تغییرات زیرا روی آن اعمال کنید.
مثال :

>D3 array API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

>D3 array API>

حالا از مرورگر درخواست کنید و سپس پاسخ زیر را خواهید دید.API آرایه در D3.js
متد آرایه جستجوی API
در زیر چندین متد مهم آرایه جستجو API وجود دارد.
(آرایه)d3.scan
(d3.ascending(a, b
بگذارید هر یک از این دو را با جزئیات درک کنیم.
(آرایه)d3.scan
این متد برای انجام اسکن خطی آرایه مشخص شده استفاده می‌شود. همچنین فهرست حداقل عنصر را به مقایسه کننده مشخص شده باز می‌گرداند.
یک مثال ساده در زیر تعریف شده است.
مثال :
var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1
1
2
3
var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1
(d3.ascending (a، b
این متد برای انجام عمل مقایسهای استفاده می‌شود. می‌تواند به صورت زیر انجام شود :
مثال :
function ascending(a, b) {
return a < b ? -1 : a > b ? 1 : a > = b ? 0 : NaN;
}
1
2
3
function ascending(a, b) {
return a < b ? -1 : a > b ? 1 : a > = b ? 0 : NaN;
}
اگر هیچ تابع مقایسهای برای متد مرتب سازی داخلی مشخص نشده باشد، به طور پیش فرض به ترتیب حروف الفبا مرتب می‌شود. تابع فوق -۱ را بر میگرداند، اگر a کمتر از b باشد. اگر a بزرگتر از b یا ۰ باشد، ۱ بازگردانده می‌شود.
به طور مشابه، شما می‌توانید روش نزولی (a، b) را انجام دهید. اگر مقدار a از b بزرگتر باشد و یا یک باشد۱- بازگردانده می‌شود، اگر a کمتر از b باشد، یا ۰ باشد، مقدار -۱ باز می‌گردد.
به طور کلی این تابع مرتبهی معکوس را انجام می‌دهد.
مثال : یک صفحه array_search.html را ایجاد کرده و تغییرات زیرا روی آن اعمال کنید.
مثال :

>D3 array API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

>D3 array API>

اکنون از مرورگر درخواست کنید و نتیجه زیرا مشاهده نمایید.
آرایه تغییر API در D3.js
آرایه تغییر API در D3.js
برخی از مهمترین آرایه تغییر API در D3.js عبارتند از :
([d3.cross(a, b[, reducer
d3.merge(arrays
([d3.pairs(array[, reducer
(d3.permute(array, indexes
(d3.zip(arrays
بگذارید هر یک از آرایه تغییر API در D3.js را با جزئیات بیشتر درک کنیم.
([d3.cross(a, b[, reducer
این متد برای بازگرداندن محصول دکارتی از دو آرایه داده شده a و b استفاده می‌شود.
به مثال زیر توجه کنید.
مثال :
d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]
1
d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]
(d3.merge(arrays
این متد برای ادغام آرایهها استفاده می‌شود و در زیر تعریف شده است.
مثال :
d3.merge([[10], [20]]); // output is [10, 20]
1
d3.merge([[10], [20]]); // output is [10, 20]
([d3.pairs(array[, reducer
این متد برای ترکیب عناصر آرایه استفاده می‌شود و در زیر تعریف شده است.
مثال :
d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]
1
d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]
(d3.permute(array, indexes
این متد برای انجام جایگشت آرایه مشخص شده و در شاخصها استفاده می‌شود. شما همچنین می‌توانید جایگشت مقادیر را از یک شی به یک آرایه انجام دهید. در زیر مفهوم ذکر شده با مثال توضیح داده شده است.
مثال :
var object = {fruit:"mango", color: "yellow"},
fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"
1
2
3
var object = {fruit:"mango", color: "yellow"},
fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"
(d3.zip(arrays
این متد برای بازگشت آرایهای از آرایهها استفاده می‌شود. اگر آرایهها حاوی تنها یک آرایه باشند، آرایه بازگشتی شامل آرایههای یک عنصر است. اگر هیچ استدلالی مشخص نشده است، آرایه بازگشتی خالی است. به مثال زیر توجه کنید.
مثال :
d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]
1
d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]
مثال : یک صفحه وب با نام array_transform ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :

>D3 array API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

>D3 array API>

حالا از مرورگر درخواست کنید و پاسخ زیر را مشاهده کنید.آرایه تغییر API در D3.js
کلام آخر
API آرایه در D3.js و آرایه تغییر API در D3.js آموزش داده شد. از آنجا که جاوا اسکریپت عموما به عنوان یک استاندارد برای توسعه محتوای وب پویا شناخته می‌شود، d3.js به ویژه برای ساخت گرافیک تعاملی از منبع دادهها مفید است.
خرداد
جلسه ۱۴ : مجموعههای API در D3.js
دسته‌بندی‌ها :
بازدید : 97
فهرست
مقدمه
مجموعههای API در D3.js
API اشیاء در D3.js
API نقشهها در D3.js
مجموعه API
API Nests
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، این جلسه از آموزشهای دوره D3.js به مجموعههای API در D3.js اختصاص داده می‌شود. به عبارت ساده یک مجموعه یک شی است که عناصر چندگانه را به یک واحد تبدیل می‌کند. همچنین به عنوان یک شمارنده شناخته می‌شود. این فصل در مورد مجموعههای API در D3.js توضیح داده شده است.
مجموعههای API در D3.js
ابتدا به پیکربندی API می‌پردازیم. شما می‌توانید API را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :


1
2
3
4


اجازه دهید از طریق به هر یک از این API با جزئیات بپردازیم.
API اشیاء در D3.js
یک نوع داده مهم است. متدهای زیر را پشتیبانی می‌کند :
(d3.keys(object : این متد شامل کلیدهای property object است و یک آرایه از اسامی property را باز می‌گرداند.
(d3.values (object : این متد شامل مقادیر شی است و یک آرایه از مقادیر property را باز می‌گرداند.
(d3.entries (object :این روش برای بازگرداندن یک آرایه حاوی هر دو کلید و مقادیر شی مشخص شده است. هر ورودی یک شی با یک کلید و مقدار همراه است.
مثال : اجازه دهید کد زیر را در نظر بگیریم.
مثال :
d3.entries({one: 1})
1
d3.entries({one: 1})
در این مثال کلید one است و مقدار نیز ۱ می‌باشد.
مثال : یک صفحه object.html را ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :

>D3 collection API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

>D3 collection API>

اکنون، از مرورگر درخواست کنید و پاسخ زیر را مشاهده کنید.مجموعههای API در D3.js
API نقشهها در D3.js
نقشه حاوی مقادیر بر اساس جفت کلید و مقدار است. هر جفت کلیدی و مقدار به عنوان یک ورودی شناخته می‌شوند. نقشه شامل تنها کلیدهای منحصر به فرد است. همچنین برای جستجو، به روز رسانی و یا حذف عناصر بر اساس کلید مفید است . اجازه دهید وارد متد API نقشههای مختلف با جزییات شویم.
([[d3.map ([object [، key : این متد برای ایجاد یک نقشه جدید استفاده می‌شود. شیء برای کپی کردن تمام خواص قابل شمارش استفاده می‌شود.
(map.has (key : این متد برای بررسی اینکه آیا نقشه دارای یک ورودی برای رشته کلید مشخص شده است استفاده می‌شود.
(map.get (key : این متد برای بازگشت مقدار برای رشته کلید مشخص شده استفاده می‌شود.
(map.set (key، value : این متد برای تنظیم مقدار رشته کلید مشخص شده استفاده می‌شود. اگر نقشه قبلا یک رکورد برای یک رشته کلید داشته باشد، ورود قدیمی با مقدار جدید جایگزین می‌شود.
(map.remove(key : برای حذف نقشه ورودی استفاده می‌شود. اگر کلید مشخص نشده باشد، مقدار نادرست را باز می‌گرداند.
()map.clear : تمام مطالب را از نقشه حذف می‌کند.
()map.keys : آرایهای از کلیدهای رشته را برای هر ورودی در نقشه باز می‌گرداند.
()map.values : آرایهای از مقادیر برای هر ورودی در نقشه را باز می‌گرداند.
()map.entries : آرایهای از اشیاء کلیدی است، مقدار را برای هر ورودی در این نقشه باز می‌گرداند.
(x) map.each (function) : این متد برای فراخوانی تابع مشخص شده برای هر ورودی در نقشه استفاده می‌شود.
()xi) map.empty) اگر و فقط اگر این نقشه دارای ورودی صفر باشد، مقداردرست را بر می‌گرداند.
()xii) map.size) : تعداد ورودیهای نقشه را می‌دهد.
به عنوان مثال : یک صفحه وب با نام maps.html ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :

>D3 collection API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

>D3 collection API>

حالا از مرورگر درخواست کنید و پاسخ زیر را مشاهده فرمایید.
مجموعههای API در D3.js
به طور مشابه، شما همچنین می‌توانید عملیات دیگر را به همین ترتیب انجام دهید.
مجموعه API
یک مجموعه(Sets) مجموعهای است که نمیتواند عناصر تکراری داشته باشد. این مجموعه انتزاع در ریاضی را مدل می‌کند. اجازه دهید متدهای مختلف مجموعهای API را با جزییات بیشتری بررسی کنیم.
([[d3.set ([array [، accessor : این متد برای ایجاد یک مجموعه جدید استفاده می‌شود. آرایه برای اضافه کردن مقادیر رشته مورد استفاده قرار می‌گیرد. و وجود Accessor اختیاری است.
(set.has (value : این متد برای بررسی اینکه آیا مجموعه دارای یک ورودی برای رشته مقدار مشخص شده است استفاده می‌شود.
(set.add (value : برای اضافه کردن رشته مقدار مشخص شده به مجموعه استفاده می‌شود.
(set.remove (value : برای حذف مجموعهای که شامل رشته مقدار مشخص شده است استفاده می‌شود.
()set.clear :همه مقادیر را از مجموعه حذف می‌کند.
()set.values : این متد برای برگرداندن آرایه مقادیر به مجموعه استفاده می‌شود.
()set.empty : اگر و فقط اگر این مجموعه دارای مقادیر صفر باشد، مقدار درست را برمی گرداند.
()set.size :تعداد مقادیر موجود در مجموعه را می‌دهد.
به عنوان مثال : یک صفحه وب با نام sets.html را ایجاد کرده و تغییرات زیر را به آن اضافه کنید.
مثال :

>D3 collection API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

>D3 collection API>

اکنون، از مرورگر درخواست کنید و پاسخ زیر را در صفحه ببینید.
مجموعههای API در D3.js
به طور مشابه، ما می‌توانیم عملیات دیگر را نیز به خوبی انجام دهیم.
API Nests
API Nests حاوی عناصر در آرایه است و در ساختار درخت سلسله مراتبی انجام می‌شود.
متدهای موجود در API Nests عبارتند از :
()d3.nest : این متد برای ایجاد یک Nest جدید استفاده می‌شود.
(nest.key (key : این متد برای راه اندازی یک تابع کلید جدید استفاده می‌شود. این تابع برای فراخوانی هر عنصر در یک آرایه ورودی و عناصر بازگشتی در گروه استفاده می‌شود.
(nest.sortKeys (comparator : این متد برای دسته بندی کلیدها در یک مقایسه کننده مشخص استفاده می‌شود.همچنین تابع به صورت d3.ascending یا d3.descending تعریف می‌شود.
(nest.sortValues (comparator : این متد برای مرتب کردن مقادیر در یک مقایسه کننده مشخص استفاده می‌شود. تابع مقایسه کننده عناصر leaf را مرتب می‌کند.
(nest.map (array : این متد برای اعمال آرایه مشخص شده و در بازگرداندن یک نقشه توزیع شده استفاده می‌شود.
هر ورودی در نقشه بازگشتی مربوط به یک مقدار کلیدی متمایز که توسط اولین تابع کلیدی باز گردانده می‌شود. مقدار ورود به تعداد اعمال کلید ثبت شده بستگی دارد.
(nest.object (array : این متد برای اعمال عملگر nest به آرایه مشخص شده و یک شیء تو در تو باز می‌گرداند.
(nest.entries (array : این متد برای اعمال عملگر nest به آرایه مشخص شده و آرایهای از مقادیر کلیدی را باز می‌گرداند.
یک صفحه وب ساده nest.html را برای انجام متدهای nest بسازید.
مثال : مثال زیر را در نظر بگیرید.
مثال :

>D3 Nest API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

>D3 Nest API>

حالا نتیجه را در مرورگر بررسی و مشاهده کنید.
مثال :
Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]
Array[1]
0: Object
length: 1
__proto__: Array[0]
1
2
3
4
5
6
7
8
9
10
11
Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]
Array[1]
0: Object
length: 1
__proto__: Array[0]
کلام آخر
D3.js امکان کنترل بیشتری بر نتیجه نهایی بصری را فراهم می‌کند و امروزه این فناوری داغ‌ترین و قدرتمندترین فناوری مصورسازی داده مبتنی بر وب است. با ما همراه باشید تا در جلسه بعد آموزش انتخاب API در D3.js را فرا بگیرید.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، اگر به خاطر داشته باشید در جلسه پیش در مورد مجموعههای API در D3.js گفتگو شد. در این جلسه از آموزشهای دوره D3.js به انتخاب API در D3.js می‌پردازیم. انتخابها، تغیرات دادههای قدرتمند از مدل شیء سند (DOM) هستند. این مورد برای تعیین ویژگیها، سبکها، خواص، HTML و متن و بسیاری از موارد دیگر استفاده می‌شود. در این فصل جزئیات انتخاب API و پیکربندی API در D3.js را توضیح خواهیم داد.
انتخاب API در D3.js و پیکربندی API در D3.js
شما می‌توانید مستقیما با استفاده از اسکریپت زیر API را پیکربندی کنید.
مثال :


1
2
3
4


متدهای انتخاب API
در زیر مهمترین متدهای انتخاب API ذکر شده است :
()d3.selection
(d3.select(selector
(d3.selectAll(selecto
(selection.selectAll(selector
(selection.filter(filter
(selection.merge(other
(d3.matcher(selector
(d3.creator(name
(selection.each(function
([selection.call(function[, argument
()d3.local
(local.set(node, value
(local.get(node
(local.remove(node
اکنون هر یک از این متدها را با جزئیات به تفصیل بررسی کنیم.
()D3.selection
این متد برای انتخاب عنصر ریشه (root) استفاده می‌شود. این تابع همچنین می‌تواند برای تست انتخاب یا گسترش انتخاب d3js استفاده شود.
(d3.select(selector
این متد برای انتخاب اولین عنصری که با رشته انتخاب شده مشخص شده است استفاده می‌شود.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
var body = d3.select("body");
1
var body = d3.select("body");
اگر انتخابگر یک رشته نباشد، گره مشخص را که در زیر تعریف شده انتخاب می‌کند.
مثال :
d3.select("p").style("color", "red");
1
d3.select("p").style("color", "red");
(d3.selectAll(selector
این متد تمام عناصری را که با رشته انتخاب شده مشخص شده انتخاب می‌کند.
مثال زیر را در نظر بگیرید.
مثال :
var body = d3.selectAll("body");
1
var body = d3.selectAll("body");
اگر انتخابگر یک رشته نباشد، آرایهای از گرههای مشخص شده را انتخاب می‌کند، که در زیر تعریف شده است.
مثال :
d3.selectAll("body").style("color", "red");
1
d3.selectAll("body").style("color", "red");
(selection.selectAll(selector
این متد برای انتخاب یک عنصر استفاده می‌شود. همچنین عناصر قبلی را انتخاب می‌کند که با رشته انتخاب شده مطابقت دارند. عناصر در انتخاب بازگشت داده شده با گره متناظر آنها در این انتخاب گروه بندی می‌شوند. اگر هیچ یک از عناصر انتخابگر مشخص شده با عنصر فعلی مطابقت نداشته باشد، یا اگر انتخابگر صفر باشد، گروهی در شاخص فعلی خالی خواهند بود.
مثال زیر را در نظر بگیرید.
مثال :
var b = d3.selectAll("p").selectAll("b");
1
var b = d3.selectAll("p").selectAll("b");
(selection.filter(filter
این متد برای فیلتر کردن انتخاب استفاده می‌شود، یک انتخاب جدید که شامل تنها عناصری است که فیلتر مشخص شده آنها درست است را باز می‌گرداند.
مثال زیر را در نظر بگیرید.
مثال :
var even = d3.selectAll("tr").filter(":nth-child(odd)");
1
var even = d3.selectAll("tr").filter(":nth-child(odd)");
در اینجا، فیلتر انتخاب یک ردیف جدول فقط عدد فرد را نشان می‌دهد.
(selection.merge(other
این متد برای بازگرداندن یک انتخاب جدید که با انتخاب دیگری مشخص شده استفاده می‌شود.
به مثال زیر توجه نمایید.
مثال :
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
1
2
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
(d3.matcher(selector
این متد برای اختصاص انتخابگر مشخص استفاده می‌شود. همچنین تابع باز گردانده می‌شود، که مقدار درست را برگرداند.
مثال
مثال :
var p = selection.filter(d3.matcher("p"));
1
var p = selection.filter(d3.matcher("p"));
(d3.creator(name
این متد برای اختصاص نام عنصر مشخص شده استفاده می‌شود. تابعی باز گردانده می‌شود که یک عنصر از نام داده شده را می‌سازد، فرض می‌شود که این عنصر اصلی (parent)است.
مثال زیر را در نظر بگیرید.
مثال :
selection.append(d3.creator("p"));
1
selection.append(d3.creator("p"));
(selection.each(function
این متد برای فراخوانی تابع مشخص شده برای هر عنصر انتخاب شده استفاده می‌شود، به ترتیب توسط datum فعلی (d)، شاخص فعلی (i) و گروه فعلی (گرهها) به عنوان عنصر فعلی DOM (گرهها [i ]) فرستاده می‌شود.
همانطور که در زیر توضیح داده شده است.
مثال :
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
1
2
3
4
5
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
([selection.call(function[, argument
این متد برای اینکه به طور دقیق یکبار تابع مشخص شده را فراخوانی کند استفاده می‌شود. سینتکس آن در زیر نشان داده شده است.
مثال :
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
1
2
3
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
این متد را می‌توان به صورت زیر نیز نشان داد.
مثال :
d3.selectAll("p").call(name, "Adam", "David");
1
d3.selectAll("p").call(name, "Adam", "David");
()d3.local
d3 به صورت محلی اجازه می‌دهد تا شما وضعیت محلی که مستقل از داده است را تعریف کنید.
مثال زیر را در نظر بگیرید.
مثال :
var data = d3.local();
1
var data = d3.local();
بر خلاف var، مقدار هر محل نیز توسط DOM محدود می‌شود.
local.set (گره، مقدار)
این متد مقدار محلی را بر روی گره مشخص شده با مقدار تعیین می‌کند.
مثال
مثال :
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
1
2
3
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
این متد مقدار محلی را بر روی گره مشخص می‌کند باز می‌گرداند. اگر گره محلی را تعریف نکنید، آن مقدار را از نزدیکترین گره که آن را تعریف می‌کند، باز می‌گرداند.
local.remove (گره)
این متد مقدار محلی را از گره مشخص شده حذف می‌کند. اگر گره تعریف شده باشد، مقدار درست را بر میگرداند، در غیر این صورت نادرست باز گردانده می‌شود.
کلام آخر
آموزش انتخاب API در D3.js و پیکربندی API در D3.js همراه با متدهای پرکاربرد در این زمینه معرفی شدند. امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد مسیرهای API در D3.js را فرا بگیرید.
سیرهای API در D3.js
دسته‌بندی‌ها :
بازدید : 110
فهرست
مقدمه
مسیرهای API در D3.js
گام اول پیکربندی مسیرها در D3.js است.
متد مسیرهای API
([path.arc(x, y, radius, startAngle, endAngle[, anticlockwise
(path.rect(x, y, w, h
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه پانزدهم از آموزش‌های دوره D3.js را با معرفی مسیرهای API در D3.js و نحوه پیکربندی مسیرها در D3.js آغاز می‌کنیم. مسیرها برای رسم مستطیل، دایره، بیضی، چند ضلعی‌ها، خطوط راست و منحنی استفاده می‌شوند. مسیرهای SVG نشان دهنده طرح کلی از یک شکل است که می‌تواند به صورت خط‌های Stroked، Filled یا خط چین و یا هر ترکیبی از این سه صورت باشد.
مسیرهای API در D3.js
گام اول پیکربندی مسیرها در D3.js است.
شما می‌توانید API مسیرها را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :


1
2
3
4


متد مسیرهای API
بعضی از رایج‌ترین متد‌های مسیرهای API به طور خلاصه عبارتند از :
()d3.path : این متد برای ایجاد یک مسیر جدید استفاده می‌شود.
(path.moveTo (x، y : این متد برای حرکت دادن مقادیر مشخص x و y استفاده می‌شود.
() path.closePath : این متد برای بستن مسیر جاری استفاده می‌شود.
(path.lineTo (x، y : این متد برای ایجاد یک خط از نقطه فعلی که با x، y تعریف شدند استفاده می‌شود.
(path.quadraticCurveTo (cpx، cpy، x، y : این متد برای رسم یک منحنی درجه دوم از نقطه جاری به نقطه مشخص شده استفاده می‌شود.
(path.bezierCurveTo (cpx1، cpy1، cpx2، cpy2، x، y : این متد برای رسم یک منحنی bezier از نقطه جاری به نقطه مشخص شده استفاده می‌شود.
(path.arcTo (x1، y1، x2، y2، radius :این متد برای رسم یک قوس دایره از نقطه جاری به یک نقطه مشخص شده (x1، y1) و پایان خط بین نقاط مشخص شده (x1، y1) و (x2، y2) است.
([path.arc(x, y, radius, startAngle, endAngle[, anticlockwise
این متد برای رسم یک قوس دایره‌ای به مرکز مشخص شده (x، y)، شعاع، زاویه شروع و زاویه پایان استفاده می‌شود. اگر مقدار عددی anticlockwise(برخلاف ساعت) درست باشد، قوس در جهت خلاف عقربه‌های ساعت کشیده می‌شود، در غیر این صورت در جهت عقربه‌های ساعت کشیده می‌شود.
(path.rect(x, y, w, h
این متد برای ایجاد زیر مسیر جدید که حاوی فقط چهار نقطه (x، y)، (x + w، y)، (x + w، y + h)، (x، y + h)می باشد استفاده می‌شود. با استفاده از این چهار نقطه که توسط خطوط مستقیم متصل می‌شوند زیر مسیر بسته می‌شود. معادل با context.rect و با استفاده از دستورات lineto درSVG عمل می‌کند.
()path.toString : نمایش رشته‌ای مسیر را با توجه به مشخصات داده مشخص شده در مسیر SVG باز می‌گرداند.
مثال
اجازه دهید یک خط ساده را در D3 با استفاده از مسیر API ایجاد کنیم. ابتدا یک صفحه وب با نام linepath.html ایجاد کرده و سپس تغییرات زیر را در آن اضافه کنید.
مثال :

 

اکنون، از مرورگر درخواست کنید و نتیجه زیر را ببینید.مسیرهای API در D3.js
کلام آخر
از قابلیت‌های اساسی کتابخانه D3، می‌توان به ادغام شدن با Tableau و obiee یا نسخه هوش تجاری اوراکل، کلیک ویو (Qlikview) و نرم افزار R اشاره کرد که می‌تواند گزارشی بسیار متفاوت و پویا را در اختیار کاربران خود قرار دهد.
عملکرد مثال
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، این جلسه از آموزش‌های دوره D3.js به مقیاس API در D3.js اختصاص داده می‌شود. D3 توابعی را برای رسم محور فراهم می‌کند. محور از خطوط، علامت و برچسب‌ها ساخته شده است. یک محور از مقیاس استفاده می‌کند، بنابراین به هر محور باید یک مقیاس برای کار با آن داده شود. در این جلسه به پیکربندی API در D3.js می‌پردازیم.
مقیاس API در D3.js
ابتدا به پیکربندی API در D3.js می‌پردازیم. ما می‌توانیم API را مستقیما با استفاده از اسکریپت زیر پیکربندی کنیم.
مثال :









1
2
3
4
5
6
7
8
9
10
11









متدهای مقیاس API
D3 متد‌های مقیاس گذاری زیر را برای انواع مختلف نمودارها ارائه می‌دهد. ارز جمله آن‌ها عبارتند از :
()d3.scaleLinear : یک مقیاس خطی پیوندی را ایجاد می‌کند که در آن می‌توانیم داده‌های ورودی (دامنه) را به محدوده خروجی مشخص مشخص کنیم.
()d3.scaleIdentity :ساخت یک مقیاس خطی که داده‌های ورودی همان خروجی است.
()d3.scaleTime : ساخت یک مقیاس خطی که داده‌های ورودی آن در تاریخ و خروجی در اعداد است.
()d3.scaleLog : ساخت مقیاس لگاریتمی.
()d3.scaleSqrt : ساخت مقیاس ریشه‌ای مربع.
()d3.scalePow : ساخت مقیاس نمایشی.
()d3.scaleSequential : ساخت یک مقیاس متوالی که در آن محدوده خروجی با استفاده از تابع interpolator ثابت می‌شود.
()d3.scaleQuantize : ساخت یک مقیاس quantize با محدوده خروجی گسسته.
()d3.scaleQuantile : یک مقیاس quantile که در آن داده‌های نمونه ورودی به محدوده خروجی گسسته می‌رسند، می‌سازد.
()d3.scaleThreshold : ساخت مقیاس که در آن داده‌های ورودی دلخواه به محدوده خروجی گسسته است.
()d3.scaleBand : مقیاسهای باند مانند مقیاسهای مقطع هستند البته به جز محدوده خروجی پیوسته و عددی .
()d3.scalePoint : ساخت مقیاس نقطه ای.
()d3.scaleOrdinal : یک مقیاس مرتبه‌ای که در آن داده‌های ورودی شامل الفباها هستند را ایجاد کنید و به محدوده خروجی عددی مجزا ارجاع دهید.
قبل از انجام عملکرد مثال، ابتدا به دو اصطلاح زیر توجه کنید:
دامنه : دامنه حداقل و حداکثر داده‌های ورودی شما را نشان می‌دهد.
محدوده : محدوده خروجی است، که ما می‌خواهیم مقادیر ورودی به نقشه به …
عملکرد مثال
اجازه دهید عملکرد d3.scaleLinear را در این مثال انجام دهیم. برای انجام این کار، شما باید از مراحل زیر پیروی کنید :
مرحله ۱ : تعریف متغیرها، متغیرها و داده‌های SVG را با استفاده از کدگذاری زیر تعریف کنید.
مثال :
var data = [100, 200, 300, 400, 800, 0]
var width = 500,
barHeight = 20,
margin = 1;
1
2
3
4
var data = [100, 200, 300, 400, 800, 0]
var width = 500,
barHeight = 20,
margin = 1;
مرحله ۲ : ایجاد مقیاس خطی، برای ایجاد مقیاس خطی از کد زیر استفاده کنید.
مثال :
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);
1
2
3
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);
در اینجا، برای حداقل و حداکثر مقدار دامنه به صورت دستی، می‌توانیم از توابع ساخته شده در ()d3.min و ()d3.max استفاده کنیم، که حداقل و حداکثر مقدار را به ترتیب از آرایه داده‌های ما باز می‌گرداند.
مرحله ۳ : اضافه کردن ویژگی SVG، عناصر SVG را با استفاده از کد داده شده زیر اضافه کنید.
مثال :
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
1
2
3
4
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
مرحله ۴ : اعمال تغییرات، اعمال تغییرات با استفاده از کد زیر صورت می‌گیرد.
مثال :
var g = svg.selectAll("g")
.data(data).enter().append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
1
2
3
4
5
var g = svg.selectAll("g")
.data(data).enter().append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
مرحله ۵ : افزودن عناصر rect، عناصر rect را به مقیاس اضافه کنید، همانطور که در زیر نشان داده شده است.
مثال :
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("height", barHeight - margin)
1
2
3
4
5
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("height", barHeight - margin)
مرحله ۶ : نمایش اطلاعات، اکنون داده‌ها را با استفاده از کد داده شده در زیر نشان دهید.
مثال :
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d; });
1
2
3
4
5
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d; });
مرحله ۷ : عملکرد مثال، اکنون، ما یک نمودار نواری را با استفاده از تابع ()d3.scaleLinear به صورت زیر ایجاد می‌کنیم.
یک صفحه وب با نام “scales.html” ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41





کد بالا نتیجه‌ی زیر را در مرورگر نمایش می‌دهد.
مقیاس API در D3.js
کلام آخر
آموزش مقیاس API در D3.js و پیکربندی API در D3.js به اتمام رسید . D3 به شما این امکان را می‌دهد که به کمک HTML،CSS و JAVA SCRIPT به داده‌ها زندگی ببخشید یا اصلاحا نمودارهایی متحرک رسم کنید.در جلسه بعد محور API در D3.js را فرا خواهید گرفت.
جلسه ۱۸ : محور API در D3.js
دسته‌بندی‌ها :
بازدید : 112
فهرست
مقدمه
پیکربندی محور API در D3.js
متد‌های محور API در D3.js
کارکرد مثال
مرحله ۱ : تعریف متغیرها، SVG و متغیرهای داده را با استفاده از کد زیر تعریف کنید.
مرحله ۲ : ایجاد یک تابع خطی مقیاس، ایجاد یک تابع خطی مقیاس برای هر دو محور x و y که مانند زیر تعریف شده است.
مرحله ۳ : اضافه کردن مقیاس به محور x، در حال حاضر، ما می‌توانیم مقیاس را به محور x با استفاده از کد زیر اضافه کنیم.
مرحله ۴ : اضافه کردن مقیاس به محور y، استفاده از کد زیر برای اضافه کردن مقیاس به محور y مورد استفاده قرار می‌گیرد.
مرحله ۵ : اعمال تغییرات، شما می‌توانید یک عنصر گروه را اضافه کنید و محور x، y را که در زیر تعریف شده در آن قرار دهید.
مرحله ۶ : عناصر گروه را اضافه کنید، عناصر انتقال و گروه را با استفاده از کد زیر اعمال کنید.
مرحله ۷ : عملکرد مثال، لیست کامل کد در بلوک زیر داده می‌شود. یک محور وب سایت ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

متد‌ها و پیکربندی محور API

محور از خطوط، زاویه و برچسب‌ها ساخته شده است. یک محور از مقیاس استفاده می‌کند، بنابراین به هر محور باید یک مقیاس برای کار با آن داده شود.
پیکربندی محور API در D3.js
شما می‌توانید API را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :

متد‌های محور API در D3.js
D3 توابع مهم زیر را برای رسم محور فراهم می‌کند.
آنها به صورت زیر شرح داده شده‌اند :
()d3.axisTop : این متد برای ایجاد یک محور افقی بالا استفاده می‌شود.
()d3.axisRight : این متد برای ایجاد یک محو عمودی راست محور استفاده می‌شود.
()d3.axisBottom : این متد برای ایجاد یک محور پایین افقی استفاده می‌شود.
()d3.axisLeft : این متد محور عمودی چپ را ایجاد می‌کند.
کارکرد مثال
اجازه دهید یاد بگیریم که چگونه x و y را به یک گراف اضافه کنیم. برای انجام این کار، ما باید به مراحل زیر توجه داشته باشیم.
مرحله ۱ : تعریف متغیرها، SVG و متغیرهای داده را با استفاده از کد زیر تعریف کنید.
مثال :

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)

مرحله ۲ : ایجاد یک تابع خطی مقیاس، ایجاد یک تابع خطی مقیاس برای هر دو محور x و y که مانند زیر تعریف شده است.
مثال :

var xscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width - 100]);
var yscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height/2, 0]);

در اینجا ما یک مقیاس خطی ایجاد کردیم و دامنه و محدوده را مشخص کرده ایم.
مرحله ۳ : اضافه کردن مقیاس به محور x، در حال حاضر، ما می‌توانیم مقیاس را به محور x با استفاده از کد زیر اضافه کنیم.
مثال :
var x_axis = d3.axisBottom()
.scale(xscale);
1
2
var x_axis = d3.axisBottom()
.scale(xscale);
در اینجا ما از d3.axisBottom برای ایجاد محور X استفاده می‌کنیم و مقیاسی را که قبلا تعریف شده است، ارائه می‌دهیم.
مرحله ۴ : اضافه کردن مقیاس به محور y، استفاده از کد زیر برای اضافه کردن مقیاس به محور y مورد استفاده قرار می‌گیرد.
مثال :
var y_axis = d3.axisLeft()
.scale(yscale);
1
2
var y_axis = d3.axisLeft()
.scale(yscale);
در اینجا، ما از d3.axisLeft برای ایجاد محور Y استفاده می‌کنیم و آن را با مقیاسی که در بالا تعریف کردیم ارائه می‌دهیم.
مرحله ۵ : اعمال تغییرات، شما می‌توانید یک عنصر گروه را اضافه کنید و محور x، y را که در زیر تعریف شده در آن قرار دهید.
مثال :
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
1
2
3
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
مرحله ۶ : عناصر گروه را اضافه کنید، عناصر انتقال و گروه را با استفاده از کد زیر اعمال کنید.
مثال :
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)
1
2
3
4
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)
مرحله ۷ : عملکرد مثال، لیست کامل کد در بلوک زیر داده می‌شود. یک محور وب سایت ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45






اکنون، از مرورگر درخواست کنید و تغییرات زیرا مشاهده کنید.محور API در D3.js
کلام آخر
D3 داده محور است، D3 قابلیت این را دارد که از داده‌های استاتیک استفاده کند و یا داده‌ها رو از روی سرور و با فرمت‌های مختلف مثل آرایه، CSV، JSON و XML و … واکشی کند و نمودارهای مختلفی را رسم کند. آموزش پیکربندی محور API در D3.js و محور API در D3.js به اتمام رسید امیدواریم از مطالب بهره کافی را برده باید.
این پست را ارزیابی کنید
جلسه ۱۹ : شکل API در D3.js
جلسه ۱۷ : مقیاس API در D3.js
جلسه ۱۹ : شکل API در D3.js
دسته‌بندی‌ها :
بازدید : 107
فهرست
مقدمه
پیکربندی API در D3.js
ژنراتورهای شکل
API Arcs
API دایره ای
خطوط API در D3.js
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در این جلسه از آموزش‌های دوره D3.js شکل API در D3.js مورد بحث قرار می‌گیرد. همچنین با خطوط API در D3.js نیز آشنا خواهید شد.
پیکربندی API در D3.js
شما می‌توانید شکل API در D3.js را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :



1
2
3
4
5



ژنراتورهای شکل
D3.js از اشکال مختلف پشتیبانی می‌کند. اجازه دهید دقیق تر وارد جزییات شویم.
API Arcs
ژنراتور قوس (Arcs) یک دایره یا شکل حلقه‌ای تولید می‌کند.از این متد API در فصل نمودار دایره‌ای در جلسه‌های قبلی استفاده کرده ایم. بگذارید روش‌های مختلف Arcs API را با جزئیات بیشتر درک کنیم.
()d3.arc :این متد برای ایجاد یک ژنراتور قوس جدید استفاده می‌شود.
(arc (args : برای تولید قوس با عنصرهای مشخص شده استفاده می‌شود. تنظیمات پیش فرض با شعاع و زاویه شی در زیر تعریف شده است.
مثال :

1
2
3
4
5
6
7
8
9

(arc.centroid (args : این متد برای محاسبه نقطه میانی [x، y] از مرکز خط قوس با عناصر مشخص شده است.
([arc.innerRadius ([radius : این متد برای تنظیم شعاع داخلی از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می‌شود.
مثال :
function innerRadius(d) {
return d.innerRadius;
}
1
2
3
function innerRadius(d) {
return d.innerRadius;
}
([arc.outerRadius ([radius : این متد نیز برای تنظیم شعاع بیرونی از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می‌شود. مثال آن به شرح زیر تعریف شده است.
مثال :
function outerRadius(d) {
return d.outerRadius;
}
1
2
3
function outerRadius(d) {
return d.outerRadius;
}
([arc.cornerRadius ([radius : این متد برای تنظیم شعاع کنج از شعاع داده شده و بازگرداندن ژنراتور قوس استفاده می‌شود و به شرح زیر تعریف شده است.
مثال :
function cornerRadius() {
return 0;
}
1
2
3
function cornerRadius() {
return 0;
}
اگر شعاع کنج بزرگتر از صفر باشد، کنج‌های قوس با استفاده از حلقه‌های شعاع داده شده گرد می‌شود. شعاع گوشه نباید بزرگتر از outerRadius – innerRadius) / 2) باشد.
([arc.startAngle ([angle : این متد برای تنظیم زاویه شروع تابع از زاویه داده شده استفاده می‌شود و به شرح زیر تعریف شده است:
مثال :
function startAngle(d) {
return d.startAngle;
}
1
2
3
function startAngle(d) {
return d.startAngle;
}
([arc.endAngle([angle : این متد برای تنظیم زاویه پایانی تابع از زاویه داده شده استفاده می‌شود و به شرح زیر تعریف شده است.
مثال :
function endAngle(d) {
return d.endAngle;
}
1
2
3
function endAngle(d) {
return d.endAngle;
}
([arc.padAngle ([angle : این متد برای تنظیم زاویه پد(pad) به عملکرد از زاویه داده شده استفاده می‌شود.
مثال :
function padAngle() {
return d && d.padAngle;
}
1
2
3
function padAngle() {
return d && d.padAngle;
}
([x) arc.padRadius ([radius) : این متد برای تنظیم شعاع پد به تابع مشخص شده از شعاع داده شده استفاده می‌شود. شعاع پد تعیین کننده فاصله ثابت فیکس شده می‌باشد و باعث جدا کردن قوس مجاور می‌شود، برابر است با padRadius * padAngle.
([xi) arc.context([context) : این متد برای تنظیم محتوا و بازگرداندن ژنراتور قوس استفاده می‌شود.
API دایره ای
این API برای ایجاد یک ژنراتور دایره ای(Pie) استفاده می‌شود. ما این متد API را در فصل قبل انجام داده ایم. تمام این متد‌ها را به طور جدی مورد بحث قرار خواهیم داد.
()d3.pie :یک ژنراتور دایره‌ای جدید را با تنظیمات پیش فرض ایجاد می‌کند.
([pie (data [، arguments : این متد برای تولید یک دایره برای مقدار آرایه داده شده استفاده می‌شود. آرایه‌ای از اشیا را باز می‌گرداند. اشیاء در حقیقت زاویه قوس داده هستند. هر شیء دارای خواص زیر است :
data : داده ورودی؛ عنصر متناظر در آرایه داده ورودی می‌باشند .
value : مقدار عددی قوس را نشان می‌دهد.
index : نشان دهنده فهرست قوس.
startAngle : زاویه شروع قوس.
endAngle – زاویه پایانی قوس.
padAngle : زاویه پد کمان.
([pie.value ([value : این متد برای تنظیم مقدار برای تابع مشخص شده و تولید یک دایره استفاده می‌شود که به شرح زیر تعریف شده است:
مثال :
function value(d) {
return d;
}
1
2
3
function value(d) {
return d;
}
([pie.sort ([compare : این متد برای مرتب کردن داده‌های تابع مشخص شده استفاده می‌شود و دایره تولید می‌کند. تابع مقایسه کننده به شرح زیر تعریف شده است.
مثال :
pie.sort(function(a, b)
{ return a.name.localeCompare(b.name); }
);
1
2
3
pie.sort(function(a, b)
{ return a.name.localeCompare(b.name); }
);
در اینجا، تابع مقایسه دارای دو عنصر ‘a’ و ‘b’ است، هر عنصر از آرایه داده ورودی است. اگر قوس برای ‘a’ قبل از قوس ‘b’ باشد، مقایسه کننده باید یک عدد کمتر از صفر را بازگرداند. اگر قوس برای ‘a’ بعد از قوس ‘b’ باشد، مقایسه کننده باید یک عدد بیشتر از صفر را بازگرداند.
([pie.sortValues ([compare : این متد برای مقایسه مقدار از تابع داده شده و تولید یک دایره استفاده می‌شود. تابع به شرح زیر تعریف شده است.
مثال :
function compare(a, b) {
return b - a;
}
1
2
3
function compare(a, b) {
return b - a;
}
([pie.startAngle ([angle : این متد برای تنظیم زاویه شروع دایره به تابع مشخص شده استفاده می‌شود. اگر زاویه مشخص نشده باشد، زاویه شروع فعلی را باز می‌گرداند و به شرح زیر تعریف شده است.
مثال :
function startAngle() {
return 0;
}
1
2
3
function startAngle() {
return 0;
}
([pie.endAngle ([angle : این متد برای تنظیم زاویه پایانی دایره به تابع مشخص شده استفاده می‌شود. اگر زاویه مشخص نشده باشد، زاویه پایان فعلی را باز می‌گرداند و به شرح زیر تعریف شده است.
مثال :
function endAngle() {
return 2 * Math.PI;
}
1
2
3
function endAngle() {
return 2 * Math.PI;
}
([pie.padAngle([angle : این متد برای تنظیم زاویه پد(pad) به تابعد مشخص شده و برای تولید دایره استفاده می‌شود. تابع به شرح زیر تعریف شده است.
مثال :
function padAngle() {
return 0;
}
1
2
3
function padAngle() {
return 0;
}
خطوط API در D3.js
خطوط API در D3.js برای تولید خط استفاده می‌شود. از این متد API در فصل Graphs استفاده کرده ایم.
()d3.line : این متد برای ایجاد ژنراتور خط جدید استفاده می‌شود.
(line (data : این متد برای تولید یک خط برای آرایه داده شده استفاده می‌شود.
([line.x ([x : این متد برای تنظیم x accessor به تابع مشخص شده وبرای تولید یک خط است. این تابع با مثال در قسمت زیر تعریف شده است :
مثال :
function x(d) {
return d[0];
}
1
2
3
function x(d) {
return d[0];
}
([line.y ([y : این متد برای تنظیم دسترسی ‘y’ به تابع مشخص شده می‌باشد و خط را تولید می‌کند. تابع آن به شرح زیر تعریف شده است.
مثال :
function y(d) {
return d[1];
}
1
2
3
function y(d) {
return d[1];
}
([line.defined([defined : این متد برای تعیین دسترسی به تابع مشخص شده استفاده می‌شود.
مثال :
function defined() {
return true;
}
1
2
3
function defined() {
return true;
}
([line.curve([curve : برای تنظیم منحنی و ایجاد خط استفاده می‌شود.
(line.context (context : این متد برای تنظیم زمینه و تولید یک خط استفاده می‌شود. اگر متن مشخص نشده باشد، مقدار صفر بازگردانده می‌شود.
()d3.lineRadial : این متد برای ایجاد خط شعاعی جدید استفاده می‌شود. معادل با ژنراتور خط دکارتی است.
([lineRadial.radius ([radius : این متد برای رسم خط شعاعی استفاده می‌شود و دسترسی به شعاع را بازمی گرداند و فاصله از مبدأ را از (۰،۰) می‌گیرد.
کلام آخر
D3 داده محور است، D3 قابلیت این را دارد که از داده‌های استاتیک استفاده کند و یا داده‌ها رو از روی سرور و با فرمت‌های مختلف مثل آرایه، CSV، JSON و XML و … واکشی کند و نمودارهای مختلفی را رسم کند. در فصل بعد، ما درباره رنگ‌های API در D3.js را یاد خواهیم گرفت.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه نونزدهم از آموزش‌های دوره D3.js را با رنگ‌های API در D3.js آغاز می‌کنیم. رنگ‌ها با ترکیب سه رنگ اصلی RED، GREEN و BLUE نمایش داده می‌شوند. همچنین متد‌های رنگ API در D3.js شامل چندین متد پایه و پرکاربرد می‌باشد که به طور کامل آنها را معرفی میکنیم.
رنگ‌های API در D3.js
رنگ‌های API در D3.js با ترکیب سه رنگ اصلی RED، GREEN و BLUE نمایش داده می‌شوند. رنگ‌ها را می‌توان با روش‌های متفاوتی تشخیص داد :
با نام رنگ
به عنوان ارزش RGB
به عنوان مقادیر هگزادسیمال
به عنوان ارزش HWB
API رنگ در d3 نمایش رنگ‌های مختلف رنگی را ارائه می‌دهد. شما می‌توانید عملیات تبدیل و دستکاری در API را انجام دهید. بگذارید این عملیات را با جزئیات بیشتر درک کنیم .
پیکربندی API
شما می‌توانید API را با استفاده از اسکریپت زیر بارگیری کنید.
مثال :


1
2
3
4


عملیات پایه
تبدیل مقدار رنگ به HSL : برای تبدیل مقدار رنگ به HSL،استفاده می‌شود.
مثال زیر را در نظر بگیرید.
مثال :
var convert = d3.hsl("green");
1
var convert = d3.hsl("green");
شما می‌توانید رنگ را تا ۴۵ درجه بچخانید، همانطور که در زیر نشان داده شده است.
مثال :
convert.h + = 45;
1
convert.h + = 45;
به طور مشابه، شما همچنین می‌توانید سطح اشباع (saturation) را نیز تغییر دهید. برای محو شدن مقدار رنگ، می‌توانید مقدار تیرگی را همانطور که در زیر نشان داده شده تغییر دهید.
مثال :
convert.opacity = 0.5;
1
convert.opacity = 0.5;
متد‌های رنگ API در D3.js
در زیر برخی از مهم‌ترین متد‌های رنگ API در D3.js معرفی شده اند.
(d3.color(specifier
color.opacity
()color.rgb
()color.toString
()color.displayable
(d3.rgb(color
(d3.hsl(color
(d3.lab(color
(d3.hcl(color
(d3.cubehelix(color
اجازه دهید هر کدام از این متدهای رنگ‌های API را با جزئیات بررسی کنیم.
(d3.color(specifier
این متد برای تجزیه رنگ مشخص شده در CSS و بازگرداندن رنگ RGB یا HSL استفاده می‌شود. اگر specifier(مشخص کننده) داده نشود، مقدار null برگشت داده می‌شود.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

در نهایت پاسخ زیر را بر روی صفحه نمایش خواهیم دید :
مثال :
{r: 0, g: 128, b: 0, opacity: 1}
1
{r: 0, g: 128, b: 0, opacity: 1}
color.opacity
اگر بخواهیم رنگ را کمی fade یا محو کنیم، می‌توانیم مقدار کدورت( opacity) را تغییر دهیم. تغییر بین محدوده [۰، ۱] است.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید :
مثال :
1
1
1
()color.rgb
این متد مقدار RGB را برای رنگ نشان می‌دهد. مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
{r: 0, g: 128, b: 0, opacity: 1}
1
{r: 0, g: 128, b: 0, opacity: 1}
()color.toString
این متد یک رشته رنگی را مطابق با مشخصات مدل CSS Object Model ارائه می‌دهد. اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
rgb(0, 128, 0)
1
rgb(0, 128, 0)
()color.displayable
توسط این تابع اگر رنگ نمایش داده شود، مقدار درست بازگردانده می‌شود. اگر غلظت رنگ RGB کمتر از ۰ یا بیشتر از ۲۵۵ باشد، یا اگر مقدار کدورت (opacity)در محدوده [۰، ۱] نباشد، مقدار غلط بازگردانده می‌شود.
اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

با از دستور بالا پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
true
1
true
(d3.rgb(color
این متد برای ساخت یک رنگ RGB جدید استفاده می‌شود. اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}
1
2
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}
(d3.hsl(color
این متد برای ساخت رنگ HSL جدید استفاده می‌شود. مقادیر به عنوان خواص h، s و l در نمونه بازگشتی قرار می‌گیرند. به مثال زیر توجه کنید.
مثال :

1
2
3
4
5

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
330
0.5
1
2
330
0.5
(d3.lab(color
این متد یک رنگ آزمایشگاهی جدید را ایجاد می‌کند. مقادیر کانال مانند خواص ‘l’، ‘a’ و ‘b’ روی نمونه بازگردانده می‌شوند.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}
1
{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}
(d3.hcl(color
این متد یک رنگ HCL جدید ایجاد می‌کند. مقادیر کانال مانند صفات h، c و l روی نمونه بازگردانده می‌شود. اجازه دهید مثال زیر را در نظر بگیریم.
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
مثال :
{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}
1
{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}
(d3.cubehelix(color
یک رنگ جدید Cubehelix ایجاد می‌کند. مقادیر به عنوان خواص h، s و l در نمونه بازگشتی قرار می‌گیرند.
اجازه دهید مثال زیر را در نظر بگیریم:
مثال :

1
2
3
4

پاسخ زیر را بر روی صفحه نمایش خواهیم دید :
مثال :
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}
1
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}
عملکرد مثال
یک صفحه وب جدید به نام color.html برای انجام تمام متد‌های API رنگ ایجاد کنید.
کد کامل در قسمت زیر لیست شده است.
مثال :

>D3 colors API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

>D3 colors API>

اکنون از مرورگر درخواست کنید و پاسخ زیر را مشاهده نمایید.رنگ‌های API در D3.js
کلام آخر
آموزش رنگ‌های API در D3.js و معرفی متد‌های رنگ API در D3.js به اتمام رسید . امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد، انتقال API در D3.js را فرا بگیرید.
خرداد
جلسه ۲۱ : انتقال API در D3.js
دسته‌بندی‌ها :
بازدید : 121
فهرست
مقدمه
انتقال API در D3.js
متدهای انتقال API
انتخاب عناصر
متدهای زمان بندی انتقال API در D3.js
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه بیستم از آموزش‌های دوره D3.js را آغاز می‌کنیم. انتقال API در D3.js مبحثی است که در این جلسه به آن اختصاص داده شده است. انتقال در D3 انتخاب عناصر را برای هر عنصر می‌گیرد؛ این انتقال بخشی از تعریف فعلی عنصر را اعمال می‌کند. متدهای زمان بندی انتقال API در D3.js شامل چندین متد است که به طور کامل در این جلسه به شما توضیح خواهیم داد.
انتقال API در D3.js
در گام نخست به پیکربندی API در D3.js می‌پردازیم.
شما می‌توانید انتقال API را با استفاده از اسکریپت زیر پیکربندی کنید.
مثال :








1
2
3
4
5
6
7
8
9
10








متدهای انتقال API
اجازه دهید به طور دقیق تر به بیان جزییات متد انتقال API بپردازیم.
انتخاب عناصر
در قسمت پایین به انواع مختلف انتخاب عناصر اشاره شده است :
([selection.transition ([name : این متد برای بازگرداندن یک عنصر منتخب انتقال جدید توسط نام استفاده می‌شود. اگر نام مشخص نشده باشد، مقدار صفر بازگشت داده می‌شود.
([selection.interrupt ([name : این متد برای ایجاد وقفه عناصر منتخب انتقال توسط نام استفاده می‌شود و در زیر تعریف شده است.
مثال :
selection.interrupt().selectAll("*").interrupt();
1
selection.interrupt().selectAll("*").interrupt();
([d3.interrupt (node [، name : این متد برای ایجاد وقفه برای انتقال با نام مشخص شده و در گره مشخص شده مورد استفاده قرار می‌گیرد.
[d3.transition ([name : این متد برای بازگرداندن یک انتقال جدید با نام مشخص شده مورد استفاده قرار می‌گیرد.
(transition.select (selector : این متد برای انتخاب اولین عنصر که مطابق با انتخاب مشخص شده است استفاده می‌شود و یک انتقال را در نتیجه انتخاب که در زیر تعریف شده است، باز می‌گردد.
مثال :
transition
.selection()
.select(selector)
.transition(transition)
1
2
3
4
transition
.selection()
.select(selector)
.transition(transition)
(transition.selectAll (selector : این متد برای انتخاب تمام عناصری که با انتخابگر انتخاب شده مطابقت دارد استفاده می‌شود و یک انتقال در نتیجه انتخاب باز می‌گرداند. مثال آن در زیر تعریف شده است :
مثال :
transition
.selection()
.selectAll(selector)
.transition(transition)
1
2
3
4
transition
.selection()
.selectAll(selector)
.transition(transition)
(transition.filter (filter : این متد برای انتخاب عناصر مطابق با فیلتر مشخص شده استفاده می‌شود، آنها در زیر تعریف شده اند.
مثال :
transition
.selection()
.filter(filter)
.transition(transition)
1
2
3
4
transition
.selection()
.filter(filter)
.transition(transition)
(transition.merge (other : این متد برای ادغام انتقال با سایر انتقال‌ها مورد استفاده قرار می‌گیرد. جزییات آن زیر تعریف شده است.
مثال :
transition
.selection()
.merge(other.selection())
.transition(transition)
1
2
3
4
transition
.selection()
.merge(other.selection())
.transition(transition)
()transition.transition : این متد برای بازگشت یک انتقال جدید در عناصر انتخاب شده مورد استفاده قرار می‌گیرد. برنامه زمانی شروع می‌شود که انتقال متوقف شود. انتقال جدید نام انتقال، مدت زمان و کاهش آن را به ارث می‌برد.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
d3.selectAll(".body")
.transition()
// fade to yellow.
.style("fill", "yellow")
.transition()
// Wait for five second. Then change blue, and remove.
.delay(5000)
.style("fill", "blue")
.remove();
1
2
3
4
5
6
7
8
9
10
11
d3.selectAll(".body")
.transition()
// fade to yellow.
.style("fill", "yellow")
.transition()
// Wait for five second. Then change blue, and remove.
.delay(5000)
.style("fill", "blue")
.remove();
در این مثال،رنگ بدنه زرد می‌شود و تابع فقط پنج ثانیه قبل از آخرین انتقال شروع می‌شود.
([d3.active (node [، name : این متد برای بازگرداندن انتقال به گره مشخص شده با نام استفاده می‌شود.
متدهای زمان بندی انتقال API در D3.js
اجازه دهید با معرفی برخی از این متدها به جزییات متدهای زمان بندی انتقال API در D3.js بپردازیم.
([transition.delay ([value : این متد برای تنظیم تاخیر انتقال به مقدار مشخص شده استفاده می‌شود. اگر یک تابع برای هر عنصر انتخاب شده مورد ارزیابی قرار بگیرد، به داده فعلی ‘d’ و شاخص ‘i’ منتقل می‌شود( با محتوایی به عنوان عنصر DOM فعلی). اگر مقدار مشخص نشده باشد، مقدار فعلی تاخیر برای اولین عنصر (غیر null) در انتقال بازگردانده می‌شود.
مثال :
transition.delay(function(d, i) { return i * 10; });
1
transition.delay(function(d, i) { return i * 10; });
([transition.duration ([value : این متد برای تنظیم طول انتقال با مقدار مشخص شده استفاده می‌شود. اگر مقدار مشخص نباشد، مقدار فعلی مدت زمان برای اولین عنصر (غیر null) در انتقال بازگشت داده می‌شود.
([transition.ease ([value : این متد برای کاهش میزان انتقال برای عناصر انتخاب شده مورد استفاده قرار می‌گیرد. تابع تساوی برای هر فریم انیمیشن فراخوانی می‌شود و زمان نرمال شده ‘t’ را در محدوده [۰، ۱] انتقال می‌دهد. اگر مقدار مشخص نشده باشد، تابع فعلی برای عنصر اول (غیر صفر) در انتقال بازگردانده می‌شود.
کلام آخر
از جمله قابلیت‌های D3 : ویژگی انتقال و تغییر حالت از یک حالت به حالت دیگر: تابع ()transition در D3 تابعی بسیار قوی است و امکان انتقال و تغییر حالت را در نمودار‌ها فراهم کرده است. تعامل و انیمیشن: D3، انیمیشن‌های زیادی را ساپورت می‌کند مثل ()duration()، Delay و ()Ease. انیمیشن‌ها از یک نقطه به نقطه دیگر سریع حرکت می‌کنند و نسبت به تعاملات کاربر پاسخگو هستند.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، جلسه بیستم از آموزش‌های دوره D3.js را با کشیدن API در D3.js آغاز می‌کنیم. کشیدن و رها کردن یکی از مفهوم پرکاربرد در d3.js است. در این جلسه به نحوه کشیدن API در D3.js و معرفی برخی متدهای کشیدن API در D3.js می‌پردازیم.
کشیدن API در D3.js
نصب و راه اندازی
ما می‌توانیم مستقیما کشیدن API در D3.js را با استفاده از اسکریپت زیر انجام دهیم.
مثال :



1
2
3



متدهای کشیدن API در D3.js
در زیر برخی از مهم‌ترین متدهای کشیدن API در D3.js را معرفی کردیم.
()d3.drag
(drag(selection
([drag.container([container
([drag.filter([filter
([drag.subject([subject
([drag.clickDistance([distance
([drag.on(typenames, [listener
(d3.dragDisable(window
([d3.dragEnable(window[, noclick
اکنون اجازه دهید به جزییات بیشتر در مورد این متدها بپردازیم.
()d3.drag
این متد برای ایجاد کشیدن جدید استفاده می‌شود. شما می‌توانید این متد را با استفاده از اسکریپت زیر فراخوانی کنید.
مثال :

1
2
3

(drag(selection
این متد برای اعمال کشیدن به انتخاب مشخص شده استفاده می‌شود. شما می‌توانید با استفاده از select.call این تابع را فراخوانی کنید. یک مثال ساده در زیر تعریف شده است.
مثال :
d3.select(".node").call(d3.drag().on("drag", mousemove));
1
d3.select(".node").call(d3.drag().on("drag", mousemove));
در این مثال، رفتار کشیدن اعمال شده به عناصر انتخاب شده از طریق selection.call است.
مثال :
drag.container([container])
1
drag.container([container])
این دستور شمارنده را به تابع مشخص شده برای کشیدن تنظیم می‌کند. اگر یک شمارنده مشخص نشده باشد، دسترسی فعلی به آن بازگردانده می‌شود. برای کشیدن هر عنصر گرافیکی با بوم(Canvas)، می‌توانید شمارنده را توسط خودش تعریف کنید. این مفهوم با مثال در زیر تعریف شده است.
مثال :
function container() {
return this;
1
2
function container() {
return this;
([drag.filter ([filter
برای استفاده از فیلتر برای تابع مشخص شده استفاده می‌شود. اگر فیلتر مشخص نشده باشد، فیلتر جاری را همانطور که در زیر تعریف شده است را باز می‌گرداند.
مثال :
function filter() {
return !d3.event.button;
}
1
2
3
function filter() {
return !d3.event.button;
}
([drag.subject([subject
این متد برای تعیین موضوع برای تابع مشخص شده برای کشیدن استفاده می‌شود همانطور که در زیر تعریف شده است.
مثال :
function subject(d) {
return d = = null ? {x: d3.event.x, y: d3.event.y} : d;
}
1
2
3
function subject(d) {
return d = = null ? {x: d3.event.x, y: d3.event.y} : d;
}
در این مثال، موضوع(subject) نشان دهنده چیزی است که کشانده شده است. برای مثال، اگر شما می‌خواهید عناصر مستطیل را در SVG بکشید، موضوع پیش فرض، مستطیل کشیده شده است.
([drag.clickDistance([distance
این متد برای تعیین حداکثر فاصله برای کلیک روی رویداد mousedown و mouseup استفاده می‌شود. اگر فاصله مشخص نباشد، به صفر اشاره می‌کند.
([drag.on (typenames [listener
این متد برای تنظیم شنونده (listener)رویداد با نامهای مشخص شده برای کشیدن استفاده می‌شود. انواع نامها، یک رشته شامل یک یا چند علامت چاپی است که با فضای خالی جدا شده اند. هر typename یک نوع است، به صورت اختیاری با نقطه نیز مشخص می‌شود(.) و یک نام، مانند drag.one و .drag.two این نوع باید از یکی از موارد زیر باشد :
شروع : یک اشاره گر جدید شروع می‌شود.
کشیدن : کشیدن اشاره گر فعال
پایان : غیرفعال کردن اشاره گر فعال
(d3.dragDisable(window
این متد برای غیرفعال کردن انتخاب کشیدن و رها کردن استفاده می‌شود.همچنین مانع اقدام رویداد mousedown است. اکثر مرورگرهای انتخاب شده از این عمل به طور پیش فرض پشتیبانی می‌کنند. اگر پشتیبانی نکنند، شما می‌توانید ویژگی CSS را به هیچ(none) تنظیم کنید.
([d3.dragEnable(window[, noclick
این متد برای فعال کردن انتخاب کشیدن و رها کردن در محل مشخص شده پنجره استفاده می‌شود. همچنین برا فراخوانی رویداد mouseup استفاده می‌شود. اگر مقدار noclick را درست تعیین کنید، سپس روی رویداد کلیک کنید، در زمان صفر میلی ثانیه پایان می‌یابد.
Dragging API – Drag Events
متد D3.event برای تنظیم رویداد کشیدن استفاده می‌شود. شامل موارد زیر می‌شود:
هدف :ا نشان دهنده رفتار کشیدن است.
نوع : یک رشته است و می‌تواند هر یک از موارد زیر باشد:
“شروع”، “کشیدن” یا “پایان”.
موضوع : موضوع کشیدن، تعریف شده توسط drag.subject
([event.on(typenames, [listener
رویداد شیء، یک رویداد را نشان می‌دهد. روش رسم رویداد را برای انجام کشیدن نشان می‌دهد و به شرح زیر تعریف شده است.
مثال :
d3.event.on("drag", dragged).on("end", ended);
1
d3.event.on("drag", dragged).on("end", ended);
کلام آخر
با حجم عظیم داده‌هایی که امروزه تولید می‌شوند، تحلیل داده‌ها کاری بسیار دشوار و سخت است، نمایش تصویری داده‌ها و رسم انواع نمودارها، موثرترین ابزار برای نشان دادن داده‌ها و تحلیل داده‌ها است.
این پست را ارزیابی کنید
جلسه ۲۳ : زوم API در D3.js
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در این جلسه از آموزش‌های دوره D3.js نحوه زوم API در D3.js و متدهای زوم API در d3 را بررسی خواهیم کرد. زوم به مقیاس بندی محتوای شما کمک می‌کند . با استفاده از رویکرد کلیک و کشیدن، می‌توانید در یک منطقه خاص تمرکز کنید. در این فصل، ما جزئیات Zooming API در D3.js را مورد بحث قرار خواهیم داد.
پیکربندی API
شما می‌توانید زوم API در D3.js را مستقیما از “d3js.org” با استفاده از اسکریپت زیر بارگذاری کنید.
مثال :












1
2
3
4
5
6
7
8
9
10
11
12
13
14












متدهای زوم API در d3
بعضی از متدهای متداول مورد استفاده در Zooming API که بیشتر مورد استفاده قرار می‌گیرند عبارتند از :
()d3.zoom
(zoom(selection
(zoom.transform(selection, transform
(zoom.translateBy(selection, x, y
(zoom.translateTo(selection, x, y
(zoom.scaleTo(selection, k
(zoom.scaleBy(selection, k
([zoom.filter([filter
([zoom.wheelDelta([delta
([zoom.extent([extent
([zoom.scaleExtent([extent
([zoom.translateExtent([extent
([zoom.clickDistance([distance
([zoom.duration([duration
([zoom.interpolate([interpolate
([zoom.on(typenames[, listener
بگذارید هر کدام از این متدها را با جزییات بیشتر بیان کنیم.
()d3.zoom
این متد یک رفتار زوم جدید ایجاد می‌کند. ما می‌توانیم با استفاده از اسکریپت زیر به آن دسترسی داشته باشیم.
مثال :

1
2
3

(zoom(selection
این متد برای اعمال تغییرات زوم بر روی یک عنصر انتخاب شده است. برای مثال، شما می‌توانید یک رفتار mousedown.zoom را با استفاده از سینتکس زیر دنبال کنید.
مثال :
selection.call(d3.zoom().on("mousedown.zoom", mousedowned));
1
selection.call(d3.zoom().on("mousedown.zoom", mousedowned));
(zoom.transform(selection, transform
این متد برای تنظیم تبدیل زوم جاری از عناصر انتخاب شده به تبدیل مشخص شده استفاده می‌شود. برای مثال، ما می‌توانیم تغییر زوم را به تغییر هویت با استفاده از سینتکس زیر مجددا تنظیم کنیم.
مثال :
selection.call(zoom.transform, d3.zoomIdentity);
1
selection.call(zoom.transform, d3.zoomIdentity);
ما همچنین می‌توانیم تغییر زوم را به تغییر هویت برای ۱۰۰۰ میلی ثانیه با استفاده از نحو زیر تنظیم کنیم.
مثال :
selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);
1
selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);
(zoom.translateBy(selection, x, y
این متد برای تغییر زوم فعلی عناصر انتخاب شده با استفاده از مقادیر x و y مورد استفاده قرار می‌گیرد. شما می‌توانید مقدار تغییر x و y را به عنوان اعداد یا به عنوان توابع که اعداد را باز می‌گردانند مشخص کنید. اگر یک تابع برای عنصر انتخاب شده فراخوانی شود، از طریق داده فعلی ‘d’ و شاخص ‘i’ برای DOM منتقل می‌شود. به مثال زیر دقت کنید.
مثال :
zoom.translateBy(selection, x, y) {
zoom.transform(selection, function() {
return constrain(this.__zoom.translate(
x = = = "function" ? x.apply(this, arguments) : x,
y = = = "function" ? y.apply(this, arguments) : y
);
}
};
1
2
3
4
5
6
7
8
zoom.translateBy(selection, x, y) {
zoom.transform(selection, function() {
return constrain(this.__zoom.translate(
x = = = "function" ? x.apply(this, arguments) : x,
y = = = "function" ? y.apply(this, arguments) : y
);
}
};
(zoom.translateTo(selection, x, y
این متد برای ترجمه تبدیل زوم جاری از عناصر انتخاب شده به موقعیت مشخص x وy استفاده شده است.
(zoom.scaleTo(selection, k
این متد برای تغییر مقیاس تغییر زوم فعلی عناصر انتخاب شده به k استفاده می‌شود. در اینجا، k مقیاس عامل است، که به عنوان اعداد یا توابع مشخص شده است.
مثال :
zoom.scaleTo = function(selection, k) {
zoom.transform(selection, function() {
k = = = "function" ? k.apply(this, arguments) : k;
});
};
1
2
3
4
5
zoom.scaleTo = function(selection, k) {
zoom.transform(selection, function() {
k = = = "function" ? k.apply(this, arguments) : k;
});
};
(zoom.scaleBy(selection, k
این متد برای مقیاس تبدیل زوم فعلی عناصر انتخاب شده توسط k استفاده می‌شود. در اینجا، k مقیاس عامل است، که به عنوان اعداد و یا به عنوان توابع مشخص شده است و اعداد را باز می‌گرداند.
مثال :
zoom.scaleBy = function(selection, k) {
zoom.scaleTo(selection, function() {
var k0 = this.__zoom.k,
k1 = k = = = "function" ? k.apply(this, arguments) : k;
return k0 * k1;
});
};
1
2
3
4
5
6
7
zoom.scaleBy = function(selection, k) {
zoom.scaleTo(selection, function() {
var k0 = this.__zoom.k,
k1 = k = = = "function" ? k.apply(this, arguments) : k;
return k0 * k1;
});
};
([zoom.filter([filter
این متد برای تنظیم فیلتر برای تابع مشخص شده برای رفتار زوم استفاده می‌شود. اگر فیلتر مشخص نشده باشد، فیلتر فعلی را همانطور که در زیر نشان داده شده است باز می‌گرداند.
مثال :
function filter() {
return !d3.event.button;
}
1
2
3
function filter() {
return !d3.event.button;
}
([zoom.wheelDelta([delta
مقدار Δ توسط تابعwheel delta بازگشت داده می‌شود. اگر دلتا مشخص نشده باشد، عملکرد دلتا wheel فعلی را باز می‌گرداند.
([zoom.extent([extent
این متد مقدار برای تعیین میزان آرایه مشخص شده استفاده می‌شود. اگر مقدار مشخص نشده باشد، مقدار دسترسی فعلی را که پیش فرض به [[۰، ۰]، [width، height]] می‌رسد.
([zoom.scaleExtent([extent
این متد برای تعیین میزان مقیاس به آرایه مشخص شده از اعداد [k0، k1] استفاده می‌شود. در اینجا، k0 مقیاس کمترین مقدار مجاز است. در حالی که k1 حداکثر مقیاس مجاز است. اگر مقدار مشخص نشده باشد، مقیاس فعلی، که به طور پیش فرض [۰، ∞] است، بازگردانده می‌شود. کد نمونه را که در زیر تعریف شده را در نظر بگیرید.
مثال :
selection
.call(zoom)
.on("wheel", function() { d3.event.preventDefault(); });
1
2
3
selection
.call(zoom)
.on("wheel", function() { d3.event.preventDefault(); });
کاربر می‌تواند برای چرخاندن زوم، زمانی که در حال حاضر در حد مربوط به میزان مقیاس است سعی کند. اگر بخواهیم مانع اسکرول کردن روی ورودی چرخ بدون توجه به میزان مقیاس شویم، با ثبت یک رویداد wheel (چرخ) listener برای جلوگیری از رفتار پیش فرض مرورگر اقدام می‌کند.
([zoom.translateExtent([extent
اگر مقدار مشخص شده باشد، مقدار ترجمه را به آرایه‌ای مشخص از نقاط تعریف می‌کند. اگر مقدار مشخص نباشد، محدوده جاری فعلی را که پیش فرض [[-∞، -∞]، [+ ∞، + ∞]] است را باز می‌گرداند.
([zoom.clickDistance([distance
این متد برای تنظیم حداکثر فاصله‌ای است که منطقه zoomable می‌تواند بین بالا و پایین حرکت کند، رویداد بعدی را کلیک می‌کند.
([zoom.duration([duration
این متد برای تنظیم مدت زمان انتقال زوم با دو بار کلیک کردن و دوبار ضربه زدن به تعداد مشخصی از میلی ثانیه است و رفتار زوم را برمی گرداند. اگر مدت زمان مشخص نشده باشد، مدت زمان فعلی، که پیش فرض به ۲۵۰ میلی ثانیه است و در زیر تعریف شده است، را برمی گرداند.
مثال :
selection
.call(zoom)
.on("dblclick.zoom", null);
1
2
3
selection
.call(zoom)
.on("dblclick.zoom", null);
(zoom.interpolate (interpolate
این متد برای انتقال زوم به تابع مشخص شده استفاده می‌شود. اگر interpolate مشخص نشده باشد، interpolate فعلی بازگردانده می‌شود. به طور پیش فرض برابر با d3.interpolateZoom است.
([zoom.on (typenames [، listener
اگر شنونده مشخص شده باشد، شنونده رویداد را برای نامهای مشخص شده تعیین می‌کند و رفتار زوم را برمی گرداند. typename یک رشته شامل یک یا چند علامت چاپی است که با فضای خالی جدا شده اند. هر typename یک نوع است، به صورت اختیاری به دنبال یک دوره (.) و یک نام، مانند zoom.one و zoom.second می‌باشد. این نام اجازه می‌دهد تا چندین شنونده برای همان نوع ثبت نام شود. این نوع باید از یکی از موارد زیر باشد :
Start : پس از زوم شروع می‌شود (مانند mousedown)
Zoom : پس از تغییر به تغییر زوم (مانند بر روی mousemove).
پایان – پس از پایان زوم (مانند در mouseup).
کلام آخر
آموزش زوم API در D3.js و متدهای زوم API در d3 به اتمام رسید. با ما همراه باشید تا در جلسه بعد API‌های مختلف در D3.js را فرا بگیرید.
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در این جلسه از آموزش‌های دوره D3.js در مورد درخواست API در D3.js بحث خواهیم کرد. D3.js یک درخواست API را برای انجام XMLHttpRequest فراهم می‌کند. این فصل درخواست‌های مختلف API و متدهای درخواست API در D3 را با جزئیات توضیح می‌دهیم.
انواع درخواست API در D3.js
XMLHttpRequest
با در خواست XMLHttp کلاینت‌های Http می‌توانند اشیاء XMLHttpRequest را محاسبه کنند. این می‌تواند با JS طراحی شده مرورگرها برای بهبود استفاده مجدد از کد و اجازه استفاده از کتابخانه‌های موجود استفاده شود.شما می‌توانید این ماژول را در پروژه خود قرار دهید و به عنوان شیء XHR مبتنی بر مرورگر همانطور که در زیر توضیح داده شده استفاده کنید.
مثال :
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
1
2
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
این از هر دو درخواست‌های غیر همزمان و همزمان را پشتیبانی می‌کند و درخواست‌های GET، POST، PUT و DELETE را انجام می‌دهد.
پیکربندی درخواست‌ها
شما می‌توانید مستقیما از “d3js.org” اسکریپت زیر بارگذاری کنید.
مثال :


1
2
3
4


درخواستهای API دارای پشتیبانی داخلی برای تجزیه JSON، CSV و TSV هستند. شما می‌توانید فرمت‌های دیگر را با استفاده از درخواست یا متن به طور مستقیم تجزیه کنید.
بارگذاری فایل‌های متنی
برای بارگذاری یک فایل متنی، از سینتکس زیر استفاده کنید.
مثال :
d3.text("/path/to/sample.txt", function(error, text) {
if (error) throw error;
console.log(text);
});
1
2
3
4
d3.text("/path/to/sample.txt", function(error, text) {
if (error) throw error;
console.log(text);
});
تجزیه فایل‌های CSV
برای بارگیری و تجزیه یک فایل CSV، از سینتکس زیر استفاده کنید.
مثال :
d3.csv("/path/to/sample.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
1
2
3
4
d3.csv("/path/to/sample.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
به طور مشابه، شما می‌توانید فایل‌های JSON و TSV را نیز بارگیری کنید.
عملکرد مثال
اجازه دهید از طریق یک مثال ساده چگونگی بارگیری و تجزیه یک فایل CSV را دریابیم. قبل از آن، شما باید یک فایل CSV با نام “sample.csv” در پوشه برنامه D3 خود ایجاد کنید، همانطور که در زیر نشان داده شده است.
مثال :
Num1,Num2
1,2
3,4
5,6
7,8
9,10
1
2
3
4
5
6
Num1,Num2
1,2
3,4
5,6
7,8
9,10
اکنون، یک صفحه وب “requests.html” با استفاده از اسکریپت زیر ایجاد کنید.
مثال :

>D3.js Requests API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

>D3.js Requests API>

اکنون، از مرورگر درخواست کنید و پاسخ زیر را ببینید.درخواست API در D3.js
متدهای درخواست API در D3
بعضی از متدهای درخواست API در D3 که بیشتر مورد استفاده قرار می‌گیرند به شرح زیر می‌باشند.
[(d3.request(url[, callback
[(request.header(name[, value
[(request.mimeType([type
[(request.user([value
[(request.password([value
[(request.timeout([timeout
[(request.get([data
[(request.post([data
[(request.send(method[, data
()request.abort
[(d3.csv(url[[, row], callback
اجازه دهید هر کدام را به طور مختصر بیان کنیم.
[(d3.request(url[, callback
این متد یک درخواست جدید برای URL داده شده را باز می‌گرداند. اگر یک تماس تلفنی اختصاص داده شود، آن را به عنوان یک درخواست فراخوانی در نظر گرفته در غیر این صورت درخواست فراخوانی نمی‌شود.
مثال :
d3.request(url)
.get(callback);
1
2
d3.request(url)
.get(callback);
شما می‌توانید برخی از پارامترهای پرس و جو را با استفاده از سینتکس زیر ارسال کنید.
مثال :
d3.request("/path/to/resource")
.header("X-Requested-With", "XMLHttpRequest")
.header("Content-Type", "application/x-www-form-urlencoded")
.post("a = 2&b = 3", callback);
1
2
3
4
d3.request("/path/to/resource")
.header("X-Requested-With", "XMLHttpRequest")
.header("Content-Type", "application/x-www-form-urlencoded")
.post("a = 2&b = 3", callback);
اگر می‌خواهید یک درخواست header یا یک نوع MIME را مشخص کنید، نباید سازنده را فراخوانی کنید.
[(request.header(name[, value
این برای تعیین مقدار برای درخواست header با نام مشخص شده استفاده می‌شود. اگر مقدار مشخص نشده باشد، درخواست header را با نام مشخص شده حذف می‌کند.
مثال :
d3.request(url)
.header("Accept-Language", "en-US")
.header("X-Requested-With", "XMLHttpRequest")
.get(callback);
1
2
3
4
d3.request(url)
.header("Accept-Language", "en-US")
.header("X-Requested-With", "XMLHttpRequest")
.get(callback);
در اینجا، درخواست X-Requested با Header به XMLHttpRequest یک درخواست پیش فرض است.
([request.mimeType([type
این متد برای اختصاص دادن نوع MIME به مقدار داده شده استفاده می‌شود. به مثال زیر توجه کنید.
مثال :
d3.request(url)
.mimeType("text/csv")
.get(callback);
1
2
3
d3.request(url)
.mimeType("text/csv")
.get(callback);
([request.user ([value
این متد برای تعیین نام کاربری برای احراز هویت استفاده می‌شود. اگر یک نام کاربری مشخص نشده باشد، به صورت پیش فرض صفر می‌شود.
([request.password ([value
اگر مقدار مشخص شده باشد، برای احراز هویت رمز عبور تعیین می‌کند.
([request.timeout ([timeout
اگر یک وقفه مشخص شده باشد، زمان را به تعداد مشخصی از میلی ثانیه تعیین می‌کند.
([request.get ([data
این متد برای ارسال درخواست با روش GET استفاده می‌شود.
مثال :
request.send("GET", data, callback);
1
request.send("GET", data, callback);
([request.post([data
این متد برای ارسال درخواست با روش POST استفاده می‌شود و در قسمت زیر تعریف شده است.
مثال :
request.send("POST", data, callback);
1
request.send("POST", data, callback);
([request.send(method[, data])
برای ارسال درخواست با استفاده از متدهای GET یا POST داده شده است.
()request.abort
این متد برای لغو درخواست استفاده می‌شود.
([d3.csv(url[[, row], callback
یک درخواست جدید برای فایل CSV را در آدرس مشخص شده با پیش فرض Mime type text / csv می‌پذیرد.
مثال :
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); });
1
2
3
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); });
اگر یک فراخوانی مجدد را با متد POST مشخص کنید، نمونه آن در زیر تعریف شده است.
مثال :
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
.post(callback);
1
2
3
4
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
.post(callback);
مثال
یک فایل CSV با نام “lang.csv” را در پوشه D3 خود ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :
Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock
1
2
3
4
Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock
یک صفحه وب “csv.html” را ایجاد و اسکریپت زیرا به آن اضافه کنید.
مثال :

>D3.js request API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

>D3.js request API>

اکنون از مرورگر درخواست کنید و پاسخ زیر را مشاهده کنید.متدهای درخواست API در D3
کلام آخر
درخواست API در D3.js نیز به اتمام رسید D3 خاصیت انعطاف پذیری برای ایجاد خواص پویا و داینامیک را در بیشتر توابع دارد. حتی ویژگی و Feature‌های یک نمودار می‌تواند به عنوان یک تابع تعریف شود و این بدان معناست که داده‌های شما می‌توانند سبک و استایل و ویژگی خاصی که مد نظر شماست را داشته باشند.
این پست را ارزیابی کنید
جلسه ۲۵ : مقادیر API جدا شده متوالی در D3.j
خرداد
جلسه ۲۵ : مقادیر API جدا شده متوالی در D3.js
دسته‌بندی‌ها :
بازدید : 120
فهرست
مقدمه
پیکربندی API
متد‌های API
([d3.csvParse(string[, row
([d3.csvParseRows(string[, row
([d3.csvFormat(rows[, columns
(d3.csvFormatRows(rows
([d3.tsvParse(string[, row
([d3.tsvParseRows(string[, row
([d3.tsvFormat(rows[, columns
(d3.tsvFormatRows(rows
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در این جلسه از آموزش‌های دوره D3.js آموزش مقادیر API جدا شده متوالی در D3.js را آغاز می‌کنیم. یک توالی از یک یا چند کاراکتر برای تعیین مرز بین مناطق جداگانه و مستقل در متن ساده یا سایر داده‌ها استفاده می‌شود.مقادیر یک فیلد توالی با کاما از هم جدا شده است. مقادیر جدا شده متوالی، مقادیر جدا شده با کاما (CSV) یا مقادیر جدا شده با تب (TSV) هستند. در این فصل مقادیر API جدا شده متوالی در D3.js با جزئیات توضیح داده شده است.
پیکربندی API
ما می‌توانیم API را با استفاده از سینتکس زیر به راحتی بارگذاری کنیم.
مثال :


1
2
3
4


متد‌های API
در زیر متد‌های مختلف مقادیر API جدا شده متوالی در D3.js آورده شده است :
([d3.csvParse(string[, row
([d3.csvParseRows(string[, row
([d3.csvFormat(rows[, columns
([d3.csvFormatRows(rows
([d3.tsvParse(string[, row
([d3.tsvParseRows(string[, row
([d3.tsvFormat(rows[, columns
(d3.tsvFormatRows(rows
اجازه دهید هر یک از این متدها را با جزییات توضیح دهیم.
([d3.csvParse(string[, row
این متد برای تجزیه فرمت csv استفاده می‌شود. فایل data.csv را که در زیر نشان داده شده را در نظر بگیرید.
مثال :
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
1
2
3
4
5
6
7
8
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
اکنون می‌توانیم تابع فوق داده شده را اعمال کنیم.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
var data = d3.csvParse(string, function(d) {
return {
year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
population: d.population
};
});
1
2
3
4
5
6
var data = d3.csvParse(string, function(d) {
return {
year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
population: d.population
};
});
در این مثال، رشته مشخص شده در مقادیر جدا شده متوالی را تجزیه می‌کند. همچنین آرایه‌ای از اشیاء را نشان می‌دهد که ردیف‌های تجزیه شده را باز می‌گرداند.
([d3.csvParseRows(string[, row
این متد برای تجزیه فرمت csv معادل با ردیف استفاده می‌شود.
مثال :
var data = d3.csvParseRows(string, function(d, i) {
return {
year: new Date(+d[0], 0, 1), // convert first colum column to Date
population: d[1],
};
});
1
2
3
4
5
6
var data = d3.csvParseRows(string, function(d, i) {
return {
year: new Date(+d[0], 0, 1), // convert first colum column to Date
population: d[1],
};
});
با این دستور هر سطر در فایل CSV تجزیه می‌شود.
([d3.csvFormat(rows[, columns
این متد برای قالب بندی ردیف‌ها و ستون‌های CSV استفاده می‌شود.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
var string = d3.csvFormat(data, ["year", "population"]);
1
var string = d3.csvFormat(data, ["year", "population"]);
در اینجا، اگر ستون‌ها مشخص نشده باشند، لیست نام ستون که ردیف سرآیند(header) را تشکیل می‌دهد، توسط اتحاد تمام خواص در همه اشیاء در ردیف تعیین می‌شود. اگر ستون‌ها مشخص شوند، یک آرایه از رشته‌های نام ستون را نشان می‌دهند.
(d3.csvFormatRows(rows
این متد برای فرمت ردیف‌های csv استفاده می‌شود.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
مثال :
var string = d3.csvFormatRows(data.map(function(d, i) {
return [
d.year.getFullYear(), // Assuming d.year is a Date object.
d.population
];
}));
1
2
3
4
5
6
var string = d3.csvFormatRows(data.map(function(d, i) {
return [
d.year.getFullYear(), // Assuming d.year is a Date object.
d.population
];
}));
در اینجا، آرایه مشخص شده از سطرهای رشته را به عنوان مقادیر جدا شده جداگانه، رشته‌ای باز می‌کند.
([d3.tsvParse(string[, row
این متد برای تجزیه فرمت tsv استفاده می‌شود و شبیه به csvParse است.
([d3.tsvParseRows(string[, row
این متد برای تجزیه فرمت tsv معادل با ردیف استفاده می‌شود و مشابه تابع csvParseRows است.
([d3.tsvFormat(rows[, columns
این متد برای قالب بندی ردیف‌ها و ستون‌های tsv استفاده می‌شود.
(d3.tsvFormatRows(rows
این متد برای قالب بندی ردیف‌های tsv استفاده می‌شود.
کلام آخر
D3 به نرم افزارهای برتر دیگر مانند Tableau و Qlikview وصل می‌شود و امکان زیباتر نمایش دادن گزارشات و داینامیک کردن آنها را به شما می‌دهد. با ما همراه باشید تا در جلسه بعد با API تایمر در d3 آشنا شوید.
خرداد
جلسه ۲۶ : API تایمر در D3.js
دسته‌بندی‌ها :
بازدید : 111
فهرست
مقدمه
متد انیمیشن API تایمر در D3.js
requestAnimationFrame
تنظیم تایمر در D3.js
متدهای API تایمر
()d3.now
([[d3.timer(callback[, delay[, time
([[timer.restart(callback[, delay[, time
()timer.stop
([[d3.timeout(callback[, delay[, time
([[d3.interval(callback[, delay[, time
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در جلسه بیست و پنجم از آموزش‌های دوره D3.js به مبحث API تایمر در D3.js می‌پردازیم. ماژول API تایمر برای انجام انیمیشن‌های همزمان با تاخیر زمانی هماهنگ استفاده می‌شود. requestAnimationFrame برای انیمیشن استفاده می‌شود. در این فصل ماژول API تایمر در D3.js توضیح داده شده است.
متد انیمیشن API تایمر در D3.js
requestAnimationFrame
این متد به مرورگر دستور می‌دهد که شما مایل به پردازش یک انیمیشن هستید و درخواست می‌کند که مرورگر یک تابع مشخص برای به روز رسانی انیمیشن را فراخوانی کند.
تنظیم تایمر در D3.js
ما با استفاده از اسکریپت زیر می‌توانیم به راحتی تایمر را از d3js.org بارگیری کنیم.
مثال :


1
2
3
4


متدهای API تایمر
API تایمر از متدهای مهم زیر پشتیبانی می‌کند. همه این موارد به صورت زیر شرح داده شده است.
()d3.now
این متد زمان فعلی را باز می‌گرداند.
([[d3.timer(callback[, delay[, time
این متد برای برنامه ریزی یک تایمر جدید استفاده می‌شود و تایمر را تا زمانی که متوقف نشده فراخوانی می‌کند. شما می‌توانید یک تاخیر عددی را در MS تنظیم کنید، این ویژگی اختیاری است، و به صورت پیش فرض صفر است. اگر زمان مشخص نباشد، به عنوان ()d3.now در نظر گرفته می‌شود.
([[timer.restart(callback[, delay[, time
تایمر را با فراخوانی مشخصی Restart می‌کند و گذاشتن تاخیر و زمان اختیاری است.
()timer.stop
این متد تایمر را متوقف می‌کند و از فراخوانی‌های بعدی پیشگیری می‌کند.
([[d3.timeout(callback[, delay[, time
این متد برای متوقف کردن تایمر در اولین فراخوانی استفاده می‌شود.فراخوانی به عنوان زمان سپری شده انتقال داده می‌شود.
([[d3.interval(callback[, delay[, time
این متد در یک فاصله زمانی با تاخیر زمانی خاص مورد استفاده قرار می‌گیرد. اگر تاخیر مشخص نباشد، زمان تایمر را می‌گیرد.
مثال : صفحه وب با نام “timer.html” ایجاد کنید و اسکریپت زیر را به آن اضافه کنید.
مثال :

>Timer API>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

>Timer API>

در نهایت پاسخ زیر را بر روی صفحه نمایش خواهیم دید.
API تایمر در D3.js
کلام آخر
آموزش API تایمر در D3.js به اتمام رسید. امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد یک مثال کاربردی با D3.js را فرا بگیرید.
این پست را ارزیابی کنید
جلسه ۲۷ : مثال کاربردی با D3.js
جلسه ۲۵ : مقادیر API جدا
جلسه ۲۷ : مثال کاربردی با D3.js
دسته‌بندی‌ها :
بازدید : 110
فهرست
مقدمه
مثال کاربردی با D3.js
مرحله ۱ : اعمال سبک، سبک CSS را با استفاده از دستورات داده شده زیر اعمال کنید.
در اینجا، ما رویداد listener را برای mouseout و mouseover اضافه کردیم تا عمل انیمیشن صورت بگیرد.
در این مثال، توسط رویداد mouseover، ما می‌خواهیم عرض و ارتفاع نوار را افزایش دهیم، و رنگ نوار انتخاب انتخابی را به قرمز تغییر دهیم.
تابع ()d3.selectAll(‘.val’).remove برای حذف محتوای متن که در انتخاب نوار اضافه کردیم استفاده می‌شود.
کلام آخر
مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن، در جلسه آخر از آموزش‌های دوره D3.js قصد داریم یک مثال کاربردی با D3.js را با توجه به آموزش‌های جلسات قبلی ایجاد کنیم. با حجم عظیم داده‌هایی که امروزه تولید می‌شوند، تحلیل داده‌ها کاری بسیار دشوار و سخت است، نمایش تصویری داده‌ها و رسم انواع نمودارها، موثرترین ابزار برای نشان دادن داده‌ها و تحلیل داده‌ها است. اجازه دهید یک نمودار نواری متحرک در D3.js را ایجاد کنیم.
مثال کاربردی با D3.js
همانطور که گفته شد در این جلسه می‌خواهیم یک نمودار نواری متحرک در D3.js ایجاد کنیم.
برای این مثال کاربردی با D3.js، از فایل data.csv استفاده شده در فصل قبل از پرونده‌های جمعیت به عنوان مجموعه داده استفاده می‌کنیم و نمودار نواری متحرک در D3.js ایجاد می‌کنیم.
برای انجام این کار، باید مراحل زیر را انجام دهیم :
مرحله ۱ : اعمال سبک، سبک CSS را با استفاده از دستورات داده شده زیر اعمال کنید.
مثال :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

مرحله ۲ : تعریف متغیرها، اکنون اجازه دهید ویژگی‌های SVG را با استفاده از اسکریپت زیر تعریف کنیم.
مثال :

1
2
3
4
5

مرحله ۳ : متن را اضافه کنید، حالا متن را اضافه کنید و با استفاده از کدگذاری زیر، تغییرات را اعمال کنید.
مثال :
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
1
2
3
4
5
6
7
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
مرحله ۴ : ایجاد محدوده مقیاس، در این مرحله می‌توانیم یک محدوده مقیاس ایجاد کنیم و عناصر گروه را اضافه کنیم.
مثال :
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear()
.range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
1
2
3
4
5
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear()
.range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
مرحله ۵ : خواندن داده‌ها، ما قبلا فایل data.csv را در نمونه‌های قبلی ایجاد کرده ایم.
اکنون نیز همان فایل را در اینجا استفاده کردیم.
مثال :
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
1
2
3
4
5
6
7
8
year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62
حالا، با استفاده از کد زیر، فایل بالا را بخوانید.
مثال :
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
1
2
3
4
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
مرحله ۶ : تنظیم دامنه،اکنون دامنه را با استفاده از دستور زیر تعیین کنید.
مثال :
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
1
2
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
مرحله ۷ : اضافه کردن محور X، حالا شما می‌توانید محور X را به تغییرات اضافه کنید.
همانطور که در زیر نشان داده شده است.
مثال :
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)).append("text")
.attr("y", height - 250).attr("x", width - 100)
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("year");
1
2
3
4
5
6
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)).append("text")
.attr("y", height - 250).attr("x", width - 100)
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("year");
مرحله ۸ : اضافه کردن محور Y، با استفاده از کد داده شده زیر، محور Y را به تغییرات اضافه کنید.
مثال :
g.append("g")
.append("text").attr("transform", "rotate(-90)")
.attr("y", 6).attr("dy", "-5.1em")
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("population");
1
2
3
4
5
g.append("g")
.append("text").attr("transform", "rotate(-90)")
.attr("y", 6).attr("dy", "-5.1em")
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("population");
مرحله ۹ : عناصر گروه را اضافه کنید، اکنون عناصر گروه را اضافه کنید و اعمال تغییرات را به محور Y به صورت زیر تعریف کنید.
مثال :
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
1
2
3
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
مرحله ۱۰ : کلاس نوار را انتخاب کنید، حالا تمام عناصر در کلاس نوار را به صورت زیر تعریف کنید.
مثال :
g.selectAll(".bar")
.data(data).enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.transition()
.ease(d3.easeLinear)
.duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
g.selectAll(".bar")
.data(data).enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.transition()
.ease(d3.easeLinear)
.duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
در اینجا، ما رویداد listener را برای mouseout و mouseover اضافه کردیم تا عمل انیمیشن صورت بگیرد.
این عمل انیمیشن را هنگامی که ماوس روی یک نوار خاص قرار می‌گیرد و از آن خارج می‌شود اجرا می‌کند.
این توابع در مرحله بعد توضیح داده شده است.
تابع (ease(d3.easeLinear. برای انجام حرکت ظاهری در انیمیشن استفاده می‌شود.
این روند حرکت slow-in و slow-out را با مدت زمان ۲۰۰ پردازش می‌کند.
همچنین تاخیر را می‌توان با استفاده از دستورات زیر محاسبه کرد :
مثال :
.delay(function (d, i) {
return i * 25;
})
1
2
3
.delay(function (d, i) {
return i * 25;
})
مرحله ۱۱ – تابع handler رویداد موس، اجازه دهید یک handler رویداد mouseover را برای رسیدگی به یک رویداد ماوس به صورت زیر نشان بدهیم.
مثال :
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
در این مثال، توسط رویداد mouseover، ما می‌خواهیم عرض و ارتفاع نوار را افزایش دهیم، و رنگ نوار انتخاب انتخابی را به قرمز تغییر دهیم.
برای رنگ، یک کلاس اضافه کرده ایم که رنگ نوار انتخاب شده را به رنگ قرمز تغییر می‌دهد.
یک تابع انتقال به نوار برای مدت ۲۰۰ میلی ثانیه نیز در نظر گرفتیم .
هنگامی که عرض نوار را ۵ پیکسل و ارتفاع آن را نیز ۱۰ پیکسل افزایش دهیم :
انتقال از عرض و ارتفاع قبلی به عرض و ارتفاع جدید به مدت ۲۰۰ میلی ثانیه بعد اتفاق می‌افتد.
سپس، یک مقدار جدید ‘y’ را با نوار محاسبه کردیم، به طوری که نوار با توجه به مقدار ارتفاع جدید تحریف نشود.
مرحله ۱۲ – تابع handler رویداد ماوس(Mouseout)، اجازه دهید یک handler رویداد mouseout را برای رسیدگی به رویداد ماوس ایجاد کنیم.
این مفهوم با مثال در زیر تعریف شده است.
مثال :

function onMouseOut(d, i) {
d3.select(this).attr('class', 'bar');
d3.select(this)
.transition()
.duration(400).attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
d3.selectAll('.val')
.remove()
}

در اینجا، در رویداد mouseout، ما می‌خواهیم ویژگی‌های انتخابی را که ما در رویداد mouseover اعمال کردیم حذف کنیم.
بنابراین کلاس class bar را به کلاس ‘bar’ واقعی تغییر می‌دهیم.
همچنین عرض و ارتفاع اصلی نوار انتخاب شده را بازسازی می‌کنیم و مقدار y را به مقدار اصلی بازگردانیم.
تابع ()d3.selectAll(‘.val’).remove برای حذف محتوای متن که در انتخاب نوار اضافه کردیم استفاده می‌شود.
مرحله ۱۳ : عملکرد مثال، برنامه کامل در بلوک کد زیر داده شده است.
یک صفحه وب animated_bar.html ایجاد کنید و تغییرات زیر را به آن اضافه کنید.
مثال :

حالا مرورگر را درخواست کنید و پاسخ زیر را مشاهده نمایید. (نمودار نواری متحرک در D3.js)مثال کاربردی با D3.js
کلام آخر
مثال کاربردی با D3.js نیز زده شد. D3 با داشتن محیطی بسیار ساده و انعطاف پذیر، امکان مصور سازی داده‌ها را به بهترین شکل ممکن برای کاربران به وجود آورده است.به طور کلی می‌توان گفت D3 شبیه به Protovis است، اما Protovis برای مصور سازی استاتیک انجام می‌شود، در حالی که D3 بیشتر روی تعاملی بودن و انتقال داده‌ها متمرکز شده است.