2 ms·

Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS

• brundolf 6y ago
  Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
  • pcthrowaway 6y ago
    Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels. But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.
• thehappypm 6y ago
  You could probably use the :hover: pseudo-class and make it work.
  • brundolf 6y ago
    That would assume a single, harcoded zoom level and position
    • raylus 6y ago
      use js + scroll-wheel observer, profit.
• eyelidlessness 6y ago
  It can definitely be done with checkbox hacks, adjacent child selectors, transform, and scroll-based interaction to pan.