我喜欢在每个坐标中画一个圆圈。仅使用width
,height
和coordinates
,如何缩放坐标?我对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]; });
答案 0 :(得分:6)
你几乎就在那里,唯一的问题是你的投影是在绘图区域外投射坐标。您可以使用.center()
功能告诉投影中心位置和.scale()
“放大”。您还应该仅将投影转换为容器宽度和高度的一半,否则中心将位于右下角。
以下示例值可让您查看点:
var projection = d3.geo.mercator()
.center([43.09, -79.06])
.scale(50000)
.translate([width/2,height/2]);