D3.Geo.Circle with Canvas

我使用D3創建一個使用畫布而不是SVG的墨卡託投影。我有土地工作的道路，但我不能解決如何（如果可能的話）在特定的長/經度位置添加d3.geo.circle。D3.Geo.Circle with Canvas

如果是SVG我會使用類似

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

但我不知道如何把這種在畫布和D3使用我不是在資源的方式找到多少畫布而不是SVG。

有什麼建議嗎？

來源

2013-07-31 owen79

您只需手動將其用帆布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/

來源

2013-07-31 20:42:01

謝謝西蒙。我設法得到了畫布上的弧線，但我認爲D3必須做更多不同的座標以將它們轉換爲像素。例如，西雅圖是[47.61，-122.33]，所以在（cx，cy）屬性中必須有一些東西可以進行翻譯。那就是我失蹤的那一點 – owen79

哦。你沒有被賦予文字的X和Y座標。你有經度和緯度。我用一個例子編輯了我的答案。 –

謝謝西蒙，那太好了，你讓我走上正軌！ – owen79

的代碼，我目前工作的一個片段：

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

這打圈並將其投影到畫布上。即如果您使用正投影，它將以透視的方式出現。

來源

2014-03-25 11:22:08

D3.Geo.Circle with Canvas

回答

相關問題