d3.js - How does D3's projection function work for paths and points?

问题描述:

My understanding of D3's projection functions are that they do the same thing as the scale functions. They map GPS coordinates to pixel coordinates. This is the projection I'm currently using. (I don't understand all the variables in detail but I fiddled around with them until the map showed up)

var projection = d3.geo.albers()

.center([-122.436269,37.798107])

.rotate([0, 0, 0])

.parallels([36, 38])

.scale(300000);

This draws the map fine:

.attr("d", d3.geo.path().projection(projection))

When I try to plot points though the numbers are crazy.

.attr("cx",function(d) {

return projection([d._lon,d._lat])[0];

})

.attr("cy",function(d) {

return projection([d._lon,d._lat])[1];

});

How do I properly do this?

Here are some examples of the points I'm getting through the projection function:

[5175.3799972560955, 1808.5108650794136]

[5158.315547249338, 1823.564395627589]

[5143.958532762888, 1831.9879789081751]

On a 1280x800 screen these are way off. Even if I scale them by dividing by 100, they'll still mostly just stack on top of each other. I have a 700*700 svg positioned using twitter bootstrap. Not sure how those are taken into account. I just assumed that if the map if fine, then the same projection should work for the points.