مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در این جلسه از آموزش های دوره D3.js نحوه زوم API در D3.js و متدهای زوم API در d3 را بررسی خواهیم کرد. زوم به مقیاس بندی محتوای شما کمک می کند . با استفاده از رویکرد کلیک و کشیدن، می توانید در یک منطقه خاص تمرکز کنید. در این فصل، ما جزئیات Zooming API در D3.js را مورد بحث قرار خواهیم داد.
پیکربندی API
شما می توانید زوم API در D3.js را مستقیما از “d3js.org” با استفاده از اسکریپت زیر بارگذاری کنید.
مثال :
| <script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-ease.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script src = "https://d3js.org/d3-transition.v1.min.js"></script> <script src = "https://d3js.org/d3-drag.v1.min.js"></script> <script src = "https://d3js.org/d3-zoom.v1.min.js"></script> <body> <script> </script> </body> |
متدهای زوم 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
این متد یک رفتار زوم جدید ایجاد می کند. ما می توانیم با استفاده از اسکریپت زیر به آن دسترسی داشته باشیم.
مثال :
| <script> var zoom = d3.zoom(); </script> |
(zoom(selection
این متد برای اعمال تغییرات زوم بر روی یک عنصر انتخاب شده است. برای مثال، شما می توانید یک رفتار mousedown.zoom را با استفاده از سینتکس زیر دنبال کنید.
مثال :
| selection.call(d3.zoom().on("mousedown.zoom", mousedowned)); |
(zoom.transform(selection, transform
این متد برای تنظیم تبدیل زوم جاری از عناصر انتخاب شده به تبدیل مشخص شده استفاده می شود. برای مثال، ما می توانیم تغییر زوم را به تغییر هویت با استفاده از سینتکس زیر مجددا تنظیم کنیم.
مثال :
| selection.call(zoom.transform, d3.zoomIdentity); |
ما همچنین می توانیم تغییر زوم را به تغییر هویت برای ۱۰۰۰ میلی ثانیه با استفاده از نحو زیر تنظیم کنیم.
مثال :
| 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 ); } }; |
(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; }); }; |
(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; }); }; |
([zoom.filter([filter
این متد برای تنظیم فیلتر برای تابع مشخص شده برای رفتار زوم استفاده می شود. اگر فیلتر مشخص نشده باشد، فیلتر فعلی را همانطور که در زیر نشان داده شده است باز می گرداند.
مثال :
| 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(); }); |
کاربر می تواند برای چرخاندن زوم، زمانی که در حال حاضر در حد مربوط به میزان مقیاس است سعی کند. اگر بخواهیم مانع اسکرول کردن روی ورودی چرخ بدون توجه به میزان مقیاس شویم، با ثبت یک رویداد wheel (چرخ) listener برای جلوگیری از رفتار پیش فرض مرورگر اقدام می کند.
([zoom.translateExtent([extent
اگر مقدار مشخص شده باشد، مقدار ترجمه را به آرایه ای مشخص از نقاط تعریف می کند. اگر مقدار مشخص نباشد، محدوده جاری فعلی را که پیش فرض [[-∞، -∞]، [+ ∞، + ∞]] است را باز می گرداند.
([zoom.clickDistance([distance
این متد برای تنظیم حداکثر فاصله ای است که منطقه zoomable می تواند بین بالا و پایین حرکت کند، رویداد بعدی را کلیک می کند.
([zoom.duration([duration
این متد برای تنظیم مدت زمان انتقال زوم با دو بار کلیک کردن و دوبار ضربه زدن به تعداد مشخصی از میلی ثانیه است و رفتار زوم را برمی گرداند. اگر مدت زمان مشخص نشده باشد، مدت زمان فعلی، که پیش فرض به ۲۵۰ میلی ثانیه است و در زیر تعریف شده است، را برمی گرداند.
مثال :
| 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 را فرا بگیرید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
