یک صفحه وب ساده با استفاده از JavaScript بسازید که یک نمودار پراکندگی تعاملی (scatter plot) نمایش دهد؛ نقاط با هاور مقدارشان را نشان دهند و با کلیک روی هر نقطه رنگ آن تغییر کند.
2.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:30 0.0
برای حل این مسئله از HTML5 Canvas یا SVG و JavaScript استفاده کنید: آرایهای از نقاط (x,y و مقدار/رنگ) بسازید، تابعی برای رسم نقاط بنویسید، و با افزودن listenerهای mousemove و click موقعیت ماوس را بررسی کنید (برای دایرهها فاصله از مرکز را محاسبه کنید یا از ctx.isPointInPath استفاده کنید). هنگام هاور یک tooltip یا div شناور با مقدار نقطه نشان دهید و هنگام کلیک وضعیت رنگ نقطه را در آرایه عوض کرده و دوباره رسم کنید. نکات: رسم و مدیریت وضعیت را جدا نگه دارید، برای وضوح از devicePixelRatio استفاده کنید و هنگام بازنقشهکشی فقط آنچه لازم است را دوباره رسم کنید تا کارایی بالاتر رود.
توسط پژوهشگر در 202 روز قبل ساعت 02:30 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای وضوح روی هر نمایشگری، canvas را با اندازه واقعی ضربدر devicePixelRatio بسازید و اندازهٔ CSS را همواره همان نگه دارید. برای کارایی بهتر، فقط بخش تغییر یافته را دوباره رسم کنید و منطق دادهها و رسم را جدا نگه دارید. برای تشخیص هاور و کلیک، از محاسبهٔ فاصله از مرکز هر نقطه استفاده کنید یا از ctx.isPointInPath؛ با این کار میتوانید رفتار دایرهاي نقاط را دقیقاً پیگیری کنید و هنگام کلیک رنگ نقطه را عوض کنید. اگر تعداد نقاط زیاد است، از یک ساختار نمایشی فضایی مانند kd-tree استفاده کنید تا کشف نقاط نزدیک سریعتر انجام شود.
گزارش