D3.Geo.Circle 带画布答案

【问题标题】：D3.Geo.Circle with CanvasD3.Geo.Circle 带画布
【发布时间】：2013-08-01 12:57:47
【问题描述】：

我正在使用 D3 使用画布而不是 SVG 创建墨卡托投影。我已经找到了土地的路径，但我不知道如何（如果可能的话）在特定的长/纬度位置添加 d3.geo.circle。

如果是 SVG，我会使用类似的东西

var group = svg.append('g');
group.append('circle')
   .attr('cx', coords[0])
   .attr('cy', coords[1])
   .attr('r', 10)
   .style('fill', 'red');

但我不知道如何将其转换为画布，而且我没有找到太多使用画布而不是 SVG 的 D3 资源方式。

有什么建议吗？

【问题讨论】：

标签： canvas d3.js geo

【解决方案1】：

您只需使用画布arc 命令手动创建它：

var coords = [50, 50];
var r = 10;

ctx.beginPath();
// Make an arc from 0 to Math.PI*2, aka a full circle
ctx.arc(coords[0], coords[1], r, 0, Math.PI*2, false);
ctx.fillStyle = 'red';
ctx.fill();

现场示例：http://jsfiddle.net/9kmV3/

编辑：看来您的意思是在画布上通过适当的转换来表达纬度和经度，请看一下：

var coords = [47.61, -122.33];
var r = 5;

ctx.beginPath();
// Make an arc from 0 to Math.PI*2, aka a full circle

// X = Longitude
// Y = Latitude
// Negative latitude values go upwards, so we reverse the sign of latitude

ctx.arc(coords[1], -coords[0], r, 0, Math.PI*2, false);
ctx.fillStyle = 'red';
ctx.fill();

将西雅图放在地图上的实时示例：http://jsfiddle.net/9kmV3/1/

【讨论】：

谢谢西蒙。我设法在画布上获得了弧线，但我认为 D3 必须对坐标做一些不同的事情才能将它们转换为像素。例如，Seattle 是 [47.61,-122.33]，因此 (cx, cy) 属性中必须有可以进行翻译的东西。这就是我缺少的一点
哦。你没有得到文字的 X 和 Y 坐标。你得到纬度和经度。我已经用一个例子编辑了我的答案。

【解决方案2】：

这是我目前正在处理的一段代码：

    var circle = d3.geo.circle().angle(circleSize()).origin([0, 52]);
    circles = [circle()];
    context.beginPath();
    path({type: "GeometryCollection", geometries: circles});
    context.fillStyle = "rgba(0,100,0,.5)";
    context.fill();
    context.lineWidth = .2;
    context.strokeStyle = "#000";
    context.stroke();

这会绘制一个圆圈并将其投影到画布上。 IE。如果您使用的是正交投影，它将以透视方式显示。

【讨论】：