یک نمودار میلهای تعاملی با جاوااسکریپت بسازید که دادهها را از یک آرایه بخواند، هنگام قرار گرفتن نشانگر ماوس روی هر میله tooltip نشان دهد و با کلیک روی یک دکمه دادهها را مرتب یا فیلتر کند.
5.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:42برای حل این مسئله یک صفحه HTML با یک عنصر SVG (یا کانواس) و یک دکمه بسازید؛ سپس در جاوااسکریپت آرایه دادهها را به عرض و ارتفاع میلهها نگاشت کنید (میتوانید از D3.js برای مقیاسها و بهروزرسانیها استفاده کنید یا با محاسبه دستی scale انجام دهید). برای نمایش tooltip از یک div با موقعیت absolute استفاده کنید و با رویدادهای mouseenter/mouseleave یا mousemove مقدار و مختصات را بهروزرسانی کنید؛ برای مرتبسازی یا فیلتر کردن در تابع کلیک دکمه آرایه را sort یا filter کنید و بارها را با تغییر ارتفاع و موقعیت (یا با استفاده از transition/CSS یا requestAnimationFrame) بروزرسانی کنید. نکات: سعی کنید بهروزرسانی DOM را بهصورت انتخابی انجام دهید (ایجاد مجدد کامل کندتر است)، از مقیاس خطی برای نگاشت داده به پیکسل استفاده کنید و برای انیمیشن روان از requestAnimationFrame یا transitionهای CSS بهره ببرید.
توسط پژوهشگر در 201 روز قبل ساعت 03:42
برای عملکرد بهتر، دادهها را در یک آرایه واحد نگه دارید و با استفاده از مقیاس خطی ارتفاع میلهها را به پیکسل نگاشت کنید. برای tooltip یک div با position: absolute بسازید و با رویدادهای mouseenter یا mousemove موقعیت و مقدار را بهروزرسانی کنید تا تنها بخش کوچکی از DOM تغییر کند. وقتی کاربر روی دکمه کلیک میکند، آرایه را sort یا filter کنید و با بهروزرسانی ارتفاع و موقعیت میلهها، تنها تغییرات لازم را اعمال کنید تا انیمیشن روان باقی بماند. برای دسترسیپذیری، از tabindex و aria-label استفاده کنید تا کاربران با کیبورد و فناوریهای کمکی نیز بتوانند با میلهها تعامل کنند.
گزارش