کتابخانه D3.JS یا همان Data Driven Documents (بخش دوم)

D3.JS Data Driven Documents

کتابخانه D3.JS یا همان Data Driven Documents (بخش دوم)

1398/6/24

همانطور که در بخش اول گفتیم



خصوصیات محاسبه‌شده اغلب به داده‌های محدود ارجاع داده می‌شوند. داده‌ها به عنوان یک آرایه از مقادیر مشخص می‌شوند، و هر مقدار به عنوان آرگومان اول (d)برای انتخاب کارکردها به کار می‌رود. با استفاده از شاخص اتصال پیش‌فرض، اولین عنصر در آرایه داده‌ها به گره اول در انتخاب داده می‌شود، دومین عنصر به گره دوم، و غیره. برای مثال، اگر یک آرایه از اعداد را به عناصر پاراگراف متصل کنید، می‌توانید از این اعداد برای محاسبه اندازه قلم پویا استفاده کنید:هنگامی که داده‌ها به سند متصل شد، می‌توانید متصدی داده‌ها را حذف کنید؛ آن‌ها داده‌های قبل از حد را بازیابی خواهند کرد. این به شما این امکان را می‌دهد که بدون rebinding خواص شیمیایی داشته باشید.



ورودی و خروجی



با استفاده از منوی ورود و خروج، شما می‌توانید گره‌های جدیدی را برای داده‌های ورودی ایجاد کرده و گره‌های ارسالی را حذف کنید که دیگر مورد نیاز نیستند.


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


با استفاده از منوی ورود و خروج، شما می‌توانید گره‌های جدیدی را برای داده‌های ورودی ایجاد کرده و گره‌های ارسالی را حذف کنید که دیگر مورد نیاز نیستند.


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


به‌هنگام‌سازی گره‌ها انتخاب پیش‌فرض است - نتیجه اپراتور داده‌ها. بنابراین، اگر در مورد انتخاب‌های ورود و خروج فراموش کنید، شما به طور خودکار تنها عناصری را انتخاب خواهید کرد که داده‌های متناظر وجود دارد. یک الگوی رایج این است که انتخاب اولیه را به سه بخش تقسیم کنید: گره‌های به روز


رسانی شده برای تغییر، گره های ورودی برای افزودن، و گره‌های موجود برای حذف.


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


D ] به شما اجازه می‌دهد تا اسناد را براساس اطلاعات تبدیل کنید؛ این شامل ایجاد و هم از بین بردن عناصر است. شما به شما اجازه می‌دهد که یک سند موجود در پاسخ به تعامل کاربر، انیمیشن در طول زمان یا حتی یک اعلان غیر همزمان را از طرف ثالث تغییر دهید. یک رویکرد ترکیبی حتی ممکن است، که در آن سند در ابتدا روی سرور انجام می‌شود، و از طریق D به روزرسانی می‌شود.


انتقال



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



با اصلاح تنها ویژگی‌هایی که در واقع تغییر می‌کنند، باعث کاهش سربار می‌شود و باعث پیچیدگی گرافیکی بیشتر در نرخ‌های فریم بالا می‌شود. همچنین به ترتیب توالی انتقال پیچیده از طریق رویدادها را میسر می‌سازد. و، شما هنوز هم می‌توانید از گذاره‌ای CSS۳ استفاده کنید؛ لطفا جعبه‌ابزار مرورگر را عوض نمی‌کند، اما آن را به شیوه‌ای نشان می‌دهد که استفاده از آن آسان‌تر است.