CODEWITHSUNDEEP
javascriptsvgd3.js
bernie2436
bernie2436

Reputation: 23931

Having trouble scaling my d3 map

I am following Bostock's map tutorial with my own data. I understand that a projection is a function that takes a 3D lat/long coordinate and returns a 2D x/y coordinate. I also understand that d3.geo.path handles the messy business of taking GeoJSON and converting it to SVG. I get how you pass a projection function as a parameter to d3.geo.path to tell it how to project 3D lat/long described by GeoJSON into 2D SVG. So far so good.

However, I am having a lot of trouble "zooming in" on my map with my projection. The map is centered at the proper latitude and longitude using the projection's center property. I am using projection's translate property to put the point at the center of the SVG element. However, no matter how number I use for scale, the map never gets larger or smaller. I have checked bonehead mistakes: I am saving the changes properly and they are getting served up properly. The error has to with how I am using scale.

How do I zoom in? 

window.onload = function() {

    //Width and height
    var width = 960,
        height = 1160;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

     //setting scale to numbers as high as 30000 and as low as 3 does not change my map
    var projection = d3.geo.transverseMercator().translate([width / 2, height / 2]).scale(3).center(-90.088, 29.957);

    var path = d3.geo.path(projection);

    d3.json("orleans.json", function(json) {
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path);
    });

};

Upvotes: 0

Views: 299

Answers (2)

werds
werds

Reputation: 167

Another option to consider is using the "preserveAspectRatio" and "viewBox" properties in the svg tag (If your map uses one):

svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 200" id="mapsvg"

By raising or lowering the viewbox numbers you can shrink or enlarge the map.

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

d3.geo.path() doesn't take any arguments. To set the projection for a path, use the following code:

var path = d3.geo.path().projection(projection);

Upvotes: 1

Related Questions