scaling geo coordinates in D3.js -
i draw circle in each coordinate. using width
, height
, , coordinates
, how scale coordinates? i'm new d3.js , guess i'm doing wrong projection part.
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 = []; (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]; });
you there, problem projection projecting coordinates outside drawing area. can use .center()
function tell projection center , .scale()
"zoom in". should translate projection half width , height of container, otherwise center in bottom right corner.
the following example values should enable see points:
var projection = d3.geo.mercator() .center([43.09, -79.06]) .scale(50000) .translate([width/2,height/2]);
Comments
Post a Comment