search

d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 310 forks source link

Extreme zoom-in in d3 graph causes shape to disappear #111

Closed everhardt closed 6 years ago

everhardt commented 6 years ago

I try to use the zoom functionality of d3, but my shape keeps disappearing if I zoom in too far.

See https://bl.ocks.org/everhardt/3d6b9e127669c59251234f4c7f157fe2 for an example. If you zoom in to a visible domain of ~13 minutes or less, you'll see that the area graph will disappear. Zooming-out enough will make it appear again.

I got similar results using a line graph instead of an area graph.

I can't find what's causing this. The axis is rendering properly. If I look at the raw SVG, I don't see any strange behaviour. Is it caused by rounding somewhere? Or is there maybe a limit on the dimensions of a plot?

I've posted this question on Stack Overflow first (https://stackoverflow.com/questions/48082919/), but the cause has not yet been identified.

By the way, my gist is a fork of Mike Bostock's https://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319. I've only set the maximum scale factor to Infinity (in scaleExtent).

mbostock commented 6 years ago

This is a browser limitation, sorry.

noalternative commented 4 years ago

Hello,

I have a similar issue, and I was wondering if there is a work-around. I am working on a project with zoomable map-tiles, similar to this https://observablehq.com/@pbogden/zoomable-map-tiles. I have very small shapes on the map, and in Safari I lose them when zooming in too deep. I suspect the problem is that I 'initialize the projection to fit the world in a 1×1 square centered at the origin' at first.

Is it possible to get the same map-area on a smaller transform.k? I tried doing something like: var projection = d3.geoMercator().scale(1000/ tau).translate([0, 0]); However, the k-factor stays the same. Can someone point me in the right direction?

Regards

maxnelson commented 1 year ago

Also running in to this issue, the rects on my scaleTime chart disappear at large zoom scales. This does not happen in Firefox, but is occurring on Safari and Chrome. Curious if y'all have any ideas about what part of the browser's code is causing this, and / or if there any patches / workarounds that could be made in javascript.