缩放D3.js中的地理坐标

时间:2013-05-09 18:43:20

标签: d3.js coordinates map-projections

我喜欢在每个坐标中画一个圆圈。仅使用widthheightcoordinates,如何缩放坐标?我对D3.js很新,我猜我在投影部分做错了。

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

var coordinates = [ [43.08803611,-79.06312222], 
                    [43.09453889,-79.05636667] ];

var group = svg.append('g');

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

var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
    projectedCoordinates[i] = projection(coordinates[i]);
}

group.selectAll("circle")
    .data(projectedCoordinates)
    .enter()
    .append("circle")
    .attr("r",4)
    .attr("cx", function(d){ return d[0]; })
    .attr("cy", function(d){ return d[1]; });    

1 个答案:

答案 0 :(得分:6)

你几乎就在那里,唯一的问题是你的投影是在绘图区域外投射坐标。您可以使用.center()功能告诉投影中心位置和.scale()“放大”。您还应该仅将投影转换为容器宽度和高度的一半,否则中心将位于右下角。

以下示例值可让您查看点:

var projection = d3.geo.mercator()
                    .center([43.09, -79.06])
                    .scale(50000)
                    .translate([width/2,height/2]);