2

enter image description here

In this part of the application - I am trying to rescale a path shape and keep it inside the viewport.

I've managed to rescale the shape accordingly by the translation needs to be adjusted to keep it inside the view port.

http://jsfiddle.net/pPMqQ/101/

rescalePath: function(zoomLevel){
            //now need to rescale the path so the map and the region match?



            var ratioX = zoomLevel/this.width;
            var ratioY = zoomLevel/this.height;

            this.svg.attr("transform", "scale("+zoomLevel+") translate("+ratioX+", "+ratioY+")");

        },
        bindEvents: function(){
            var that = this;

            $(".up").click(function(e) {
                e.preventDefault();
                that.rescalePath(3);
            });

            $(".down").click(function(e) {
                e.preventDefault();
               that.rescalePath(12);
            });

        }

What is the best way of achieving this? - Surely its not right to set the translate information - is there not a function that will keep the projection in the center - ideally this will be part of a zoom/pan to sit on top of a google map - so to match the movement/pan of the map along with the zoom.

musically_ut
  • 34,028
  • 8
  • 94
  • 106
The Old County
  • 89
  • 13
  • 59
  • 129
  • If it is just one path, then I would recommend moving the _origin_ of the co-ordinate system inside that polygon which needs to be scaled. Then setting the `transform` to `scale(zoomLevel)` will zoom in/out with that point not changing location. Is that what you want? Also, have you looked at [`d3.behavior.zoom`](https://github.com/mbostock/d3/wiki/Zoom-Behavior) and related examples? – musically_ut Mar 20 '14 at 13:56
  • This is where I want to apply the feature - I've already got some mousewheel listeners in place. Was hoping to rescale/retransform or center the shape so its matching the map. My problem is - the d3 shape is on top of the map, so I have to trigger pans/zooms in another way. http://jsfiddle.net/pPMqQ/95/ – The Old County Mar 20 '14 at 14:51
  • Ok so here is a demo of the zoom - http://jsfiddle.net/pPMqQ/103/ - is there a way to adapt the example I have to use this then? – The Old County Mar 20 '14 at 14:59
  • I've added the zoom behavior. http://jsfiddle.net/pPMqQ/104/ – The Old County Mar 20 '14 at 15:05
  • 1
    A more general approach would be to use the object bounding box to figure out a center point. [This question on rotating around a center point](http://stackoverflow.com/q/21412043/3128209) has some good approaches. There isn't a scale-transform equivalent to the three-value rotate function (which allows you to specify the center of rotation), but you can approximate it with `translate(-cx,-cy) scale(scaleFactor) translate(cx,cy)`, where (cx,cy) is your center point. – AmeliaBR Mar 20 '14 at 15:40
  • I want to put the shape on top of a google map and have them in sync - Trying to hijack this example - but I am not sure how to merge the code - http://jsfiddle.net/Vjxpr/19/ – The Old County Mar 20 '14 at 15:46
  • This is the application in its entirety of what I am trying to achieve - http://stackoverflow.com/questions/22423786/d3-js-lasso-drawing-polygon-shape-search-tool-on-a-google-map-getting-the-coo/22559135#22559135 – The Old County Mar 21 '14 at 12:44
  • I've placed a bounty to solve this problem - here is the specs - http://stackoverflow.com/questions/22531187/d3-js-shape-scaling-google-map-controls-and-showing-markers-inside-a-shape-area – The Old County Mar 27 '14 at 15:53

0 Answers0