دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۹
  • خرداد

جلسه ۱۵ : انتخاب API در 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 را پیکربندی کنید.

      مثال : 

      متد های انتخاب 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

      این متد برای انتخاب اولین عنصری که با رشته انتخاب شده مشخص شده است استفاده می شود.

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

      مثال : 

      اگر انتخابگر یک رشته نباشد، گره مشخص را که در زیر تعریف شده انتخاب می کند.

      مثال : 

      (d3.selectAll(selector

      این متد تمام عناصری را که با رشته انتخاب شده مشخص شده انتخاب می کند.

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

      مثال : 

      اگر انتخابگر یک رشته نباشد، آرایه ای از گره های مشخص شده را انتخاب می کند، که در زیر تعریف شده است.

      مثال : 

      (selection.selectAll(selector

      این متد برای انتخاب یک عنصر استفاده می شود. همچنین عناصر قبلی را انتخاب می کند که با رشته انتخاب شده مطابقت دارند. عناصر در انتخاب بازگشت داده شده با گره متناظر آنها در این انتخاب گروه بندی می شوند. اگر هیچ یک از عناصر انتخابگر مشخص شده با عنصر فعلی مطابقت نداشته باشد، یا اگر انتخابگر صفر باشد، گروهی در شاخص فعلی خالی خواهند بود.

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

      مثال : 

      (selection.filter(filter

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

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

      مثال : 

      در اینجا، فیلتر انتخاب یک ردیف جدول فقط عدد فرد را نشان می دهد.

      (selection.merge(other

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

      به مثال زیر توجه نمایید.

      مثال : 

      (d3.matcher(selector

      این متد برای اختصاص انتخابگر مشخص استفاده می شود. همچنین تابع باز گردانده می شود، که مقدار درست را برگرداند.

      مثال

      مثال : 

      (d3.creator(name

      این متد برای اختصاص نام عنصر مشخص شده استفاده می شود. تابعی باز گردانده می شود که یک عنصر از نام داده شده را می سازد، فرض می شود که این عنصر اصلی (parent)است.

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

      مثال : 

      (selection.each(function

      این متد برای فراخوانی تابع مشخص شده برای هر عنصر انتخاب شده استفاده می شود، به ترتیب توسط datum فعلی (d)، شاخص فعلی (i) و گروه فعلی (گره ها) به عنوان عنصر فعلی DOM (گره ها [i ]) فرستاده می شود.

      همانطور که در زیر توضیح داده شده است.

      مثال : 

      ([selection.call(function[, argument

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

      مثال : 

      این متد را می توان به صورت زیر نیز نشان داد.

      مثال : 

      ()d3.local

      d3 به صورت محلی اجازه می دهد تا شما وضعیت محلی که مستقل از داده است را تعریف کنید.

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

      مثال : 

      بر خلاف var، مقدار هر محل نیز توسط DOM محدود می شود.

      local.set (گره، مقدار)

      این متد مقدار محلی را بر روی گره مشخص شده با مقدار تعیین می کند.

      مثال

      مثال : 

      این متد مقدار محلی را بر روی گره مشخص می کند باز می گرداند. اگر گره محلی را تعریف نکنید، آن مقدار را از نزدیکترین گره که آن را تعریف می کند، باز می گرداند.

      local.remove (گره)

      این متد مقدار محلی را از گره مشخص شده حذف می کند. اگر گره تعریف شده باشد، مقدار درست را بر میگرداند، در غیر این صورت نادرست باز گردانده می شود.

      کلام آخر

      آموزش انتخاب API در D3.js و پیکربندی API در D3.js همراه با متدهای پرکاربرد در این زمینه معرفی شدند. امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد مسیرهای API در D3.js را فرا بگیرید.

      QR:  جلسه ۱۵ : انتخاب API در D3.js
      به اشتراک بگذارید