search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
502 stars 143 forks source link

scaleTime() mousewheel zooming leads to 1px wide view #203

Closed lonewolfboke closed 4 years ago

lonewolfboke commented 4 years ago

When zooming d3.zoom().scaleExtent([min, max]).translateExtent([[0, 0], [width, height]]) via mousewheel/dragging I get a really strange behaviour on the right side of the svg. After zooming in to the max the whole view changes to 1px on the xAxis.

The used xScale is the following: d3.scaleTime().domain([minDate, maxDate]).range([0, width]).clamp(true)

This behaviour only appears on the right side.

Fil commented 4 years ago

Can you share a web page or notebook that reproduces this issue?

Fil commented 4 years ago

I think there is a similar issue on https://observablehq.com/@mbrownshoes/multiline-time-series-chart when you zoom to the max (ie to infinity). (Why would you want to do that, I have no idea—probably a better idea is to set a maximum on the scaleExtent.) Anyway, the issue might come from d3.scaleTime's granularity: when zooming to the max, the "value" in that chart is, for example, set to [2020-05-22T12:26:01.539, 2020-05-22T12:26:01.539], two identical timestamps.