d3.js - D3.Geo.Circle with Canvas -
i'm using d3 create mercator projection using canvas rather svg. i've got path of land working can't work out how (if possible) add d3.geo.circle @ specific long/lat positions.
if svg i'd use like
var group = svg.append('g'); group.append('circle')    .attr('cx', coords[0])    .attr('cy', coords[1])    .attr('r', 10)    .style('fill', 'red'); but can't work out how translate canvas , i'm not finding in way of resources d3 using canvas rather svg.
any suggestions?
you have create manually using canvas arc command:
var coords = [50, 50]; var r = 10;  ctx.beginpath(); // make arc 0 math.pi*2, aka full circle ctx.arc(coords[0], coords[1], r, 0, math.pi*2, false); ctx.fillstyle = 'red'; ctx.fill(); live example: http://jsfiddle.net/9kmv3/
edit: appears mean expressing latitude , longitude appropriate transformation on canvas, have @ instead:
var coords = [47.61, -122.33]; var r = 5;  ctx.beginpath(); // make arc 0 math.pi*2, aka full circle  // x = longitude // y = latitude // negative latitude values go upwards, reverse sign of latitude  ctx.arc(coords[1], -coords[0], r, 0, math.pi*2, false); ctx.fillstyle = 'red'; ctx.fill(); live example placing seattle on map: http://jsfiddle.net/9kmv3/1/
Comments
Post a Comment