javascript - What does it mean to scale a projection in d3? - Stack Overflow

admin管理员组

文章数量:1336148

I know that in D3, scales are mathematical maps from input data values (domain) to output data values (range). I know that I can set up a scale that will map input from the domain onto a range, like this:

var scale = d3.scale.linear().domain([100, 500])
.range([10, 350]);
scale(100); //Returns 10

I know that once you setup a scale, you can use it to scale attributes, like this:

.attr("cx", function(d) {
return scale(d[0]); //Returns scaled value
})

However, on Bostock's mapping tutorial scale is used a little differently. Bostock calls scale on whatever is returned by the mercator projection:

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

I am trying to understand that line of code and having a little trouble. mercator() returns something -- which is not so clear from the API -- and then the scale method is called on that object with an input value of 500.

What does it mean to call "scale" on a projection like this? How does this relate to scale() as a way to transform 100 in 10 -- as in the example above.

More immediately, if I add this to my code, my geojson map disappears! How do I make it scale properly?

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection); //if I add this little bit to the path, my map disappears!

Here is the GeoJSON I am using: :AbeHandler/9d28239c592c6b552212&map=10/29.9912/-89.9320

I know that in D3, scales are mathematical maps from input data values (domain) to output data values (range). I know that I can set up a scale that will map input from the domain onto a range, like this:

var scale = d3.scale.linear().domain([100, 500])
.range([10, 350]);
scale(100); //Returns 10

I know that once you setup a scale, you can use it to scale attributes, like this:

.attr("cx", function(d) {
return scale(d[0]); //Returns scaled value
})

However, on Bostock's mapping tutorial scale is used a little differently. Bostock calls scale on whatever is returned by the mercator projection:

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

I am trying to understand that line of code and having a little trouble. mercator() returns something -- which is not so clear from the API -- and then the scale method is called on that object with an input value of 500.

What does it mean to call "scale" on a projection like this? How does this relate to scale() as a way to transform 100 in 10 -- as in the example above.

More immediately, if I add this to my code, my geojson map disappears! How do I make it scale properly?

var projection = d3.geo.mercator()
    .scale(500)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection); //if I add this little bit to the path, my map disappears!

Here is the GeoJSON I am using: http://geojson.io/#id=gist:AbeHandler/9d28239c592c6b552212&map=10/29.9912/-89.9320

• javascript
• d3.js

Share Improve this question Follow edited Feb 5, 2014 at 5:14 bernie2436 asked Feb 4, 2014 at 23:11 bernie2436bernie2436 23.9k5454 gold badges156156 silver badges250250 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In this case, scale is used in the general sense of the size of something. It's not directly related to the d3 scale functions, but is related to the scale transforms you can apply to an SVG element to make it bigger or smaller. However, instead of scaling a flat drawing, it scales the plex projection.

The projection returned by d3.geo.mercator() is a function. Specifically, it's a function that converts from a longitude/latitude point to an x/y point.

Similarly, the function returned by d3.geo.path() converts GeoJSON data into SVG path definitions. When you assign a modify this function by assigning it a specific projection function, it will use that projection to figure out the position of each point on the path it creates.

Now, why are you not seeing anything at all when you assign a scaled-up projection to your path? It is probably simply that you are so zoomed-in that there is nothing to see: you're lost in empty ocean. The default scale factor on a projection is 150, so a scale of 500 is more than three times zoomed in. Try different scale factors, some bigger and some smaller than 150, to zoom in and out of the map.

Of course, the translation could also be throwing off your map. The translation parameter sets the x/y value for the center (latitude/longitude) point of your map. If you don't specify what you want to use as a center point, the projection uses 0 degrees latitude and 0 degrees longitude. If the geography you're trying to draw is nowhere near that point (which is in the Gulf of Guinea, off the coast of Ghana), then once again nothing is going to show up unless you zoom out considerably (i.e., use a very small scale number).

本文标签： javascriptWhat does it mean to scale a projection in d3Stack Overflow