search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Scaling causes some weird looking maps #292

Closed lblinovs closed 8 years ago

lblinovs commented 8 years ago

So we use USA map with bubles and responsive: true. And on resize we call map.resize().

If we initially render map on smaller screen:

image

And then resize it:

image

Bubbles and borders become huge.

lblinovs commented 8 years ago

Created a workaround where I would change bubbles radius based on map scale value. And to fix border resizing I added a css property vector-effect: non-scaling-stroke

markmarkoh commented 8 years ago

@lblinovs that CSS property fix looks great, I think that should be added to the core project. Nice find.

darkalor commented 8 years ago

The css property deals with borders, but the bubbles are still oversized because of scale. Why not just re-render the whole thing instead of using scale?

markmarkoh commented 8 years ago

Fixed with https://github.com/markmarkoh/datamaps/pull/301