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

Support for Zoom #372

Open patrickCode opened 7 years ago

patrickCode commented 7 years ago

On hovering over a country the country should zoom out. Is this feature currently supported?

partizanos commented 7 years ago

I managed to make it worked using the following code. I will try to make it as plugin the next days but you may want to try:

` var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", move); DatamapObject.svg.call(zoom); var g= d3.select("g") function move() { var t = d3.event.translate, s = d3.event.scale; t[0] = Math.min(width / 2 (s - 1), Math.max(width / 2 (1 - s), t[0])); t[1] = Math.min(height / 2 (s - 1) + 230 s, Math.max(height / 2 (1 - s) - 230 s, t[1])); zoom.translate(t); g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); }

`

partizanos commented 7 years ago

The writer of the library has also posted here regarding the issue: https://github.com/markmarkoh/datamaps/issues/146