مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه بیستم از آموزش های دوره D3.js را با کشیدن API در D3.js آغاز می کنیم. کشیدن و رها کردن یکی از مفهوم پرکاربرد در d3.js است. در این جلسه به نحوه کشیدن API در D3.js و معرفی برخی متدهای کشیدن API در D3.js می پردازیم.
کشیدن API در D3.js
نصب و راه اندازی
ما می توانیم مستقیما کشیدن API در D3.js را با استفاده از اسکریپت زیر انجام دهیم.
مثال :
| <script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-drag.v1.min.js"></script> |
متدهای کشیدن 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
این متد برای ایجاد کشیدن جدید استفاده می شود. شما می توانید این متد را با استفاده از اسکریپت زیر فراخوانی کنید.
مثال :
| <script> var drag = d3.drag(); </script> |
(drag(selection
این متد برای اعمال کشیدن به انتخاب مشخص شده استفاده می شود. شما می توانید با استفاده از select.call این تابع را فراخوانی کنید. یک مثال ساده در زیر تعریف شده است.
مثال :
| d3.select(".node").call(d3.drag().on("drag", mousemove)); |
در این مثال، رفتار کشیدن اعمال شده به عناصر انتخاب شده از طریق selection.call است.
مثال :
| drag.container([container]) |
این دستور شمارنده را به تابع مشخص شده برای کشیدن تنظیم می کند. اگر یک شمارنده مشخص نشده باشد، دسترسی فعلی به آن بازگردانده می شود. برای کشیدن هر عنصر گرافیکی با بوم(Canvas)، می توانید شمارنده را توسط خودش تعریف کنید. این مفهوم با مثال در زیر تعریف شده است.
مثال :
| function container() { return this; |
([drag.filter ([filter
برای استفاده از فیلتر برای تابع مشخص شده استفاده می شود. اگر فیلتر مشخص نشده باشد، فیلتر جاری را همانطور که در زیر تعریف شده است را باز می گرداند.
مثال :
| function filter() { return !d3.event.button; } |
([drag.subject([subject
این متد برای تعیین موضوع برای تابع مشخص شده برای کشیدن استفاده می شود همانطور که در زیر تعریف شده است.
مثال :
| 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); |
کلام آخر
با حجم عظیم داده هایی که امروزه تولید می شوند، تحلیل داده ها کاری بسیار دشوار و سخت است، نمایش تصویری داده ها و رسم انواع نمودارها، موثرترین ابزار برای نشان دادن داده ها و تحلیل داده ها است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
