Canvas D3.Geo.带画布的圆圈

我使用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

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();

实例：

---

编辑：您的意思似乎是在画布上用适当的变换表示纬度和经度，请看以下内容：

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();

---

将西雅图放在地图上的实例：

以下是我目前正在编写的一段代码：

    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();

---

这将绘制一个圆并将其投影到画布上。也就是说，如果您使用正交投影，它将显示在透视图中。

谢谢Simon。我设法在画布上画出了弧线，但我认为D3必须对坐标做一些不同的处理，才能将它们转换成像素。例如，Seattle是[47.61，-122.33]，因此（cx，cy）属性中必须有可以进行转换的内容。这就是我所怀念的。你没有得到X和Y坐标。你有纬度和经度。我用一个例子编辑了我的答案。