Question

这似乎应该是直截了当的，但我很难弄明白。

在D3.js中的地图投影上绘制圆圈很容易，例如

p = projection([-73.94,40.7]);
 svg
    .append("svg:circle")
        .attr("cx", function(d, i) { return p[0]; }) //x position translated through projection function
        .attr("cy", function(d, i) { return p[1]; }) //y position           
        .attr("r", function(d, i) { return 20; }) 
        ;

好的，但如果不是将半径设置为像素值（如上所述，为20像素），我想将其设置为可以适当缩放到投影的距离值？

简而言之，这归结为我问，“这个投影中20公里的像素值是多少？”现在我知道这会因投影而变化 - 例如墨卡托的一个20公里的圆圈看起来与赤道附近的非常不同（接近球形）（高度伸长）。

D3.js可以做很多其他聪明的投影问题，我很惊讶地发现在这里我不能轻易想出某种可接受的答案。有什么建议？我在想，好吧，你可以为一个圆计算一些纬度/经度点，然后把它绘制成某种路径......这对D3.js来说非常诡异。有更简单的方法吗？

Answer 1

好的，所以我想出了一个方法。它有点笨重 - 感觉就像是应该更自动的东西 - 但它有效。它涉及使用圆点手动构建路径元素。以下是两个函数和一个使用示例：

//example — draws a 15 km circle centered on New York City using my existing projection
var circle = svg
    .append("path")
    .attr("d", "M"+circlePath( 40.7, -73.94, 15, projection).join("L")+"Z")
    .attr("fill","none")
    .attr("stroke","red")
    .attr("stroke-width",2);

//this function generates the points for the path. If a projection is specified, it will
//automatically convert them to it. If not, it returns lat/lon positions.
//from http://stackoverflow.com/questions/20130186/d3-geo-buffer-around-a-feature with modifications
function circlePath(lat, lon, radius, projection) {
    var intervals = 72;
    var intervalAngle = (360 / intervals);
    var pointsData = [];
    for(var i = 0; i < intervals; i++){
        pointsData.push(getDestinationPoint(lat, lon, i * intervalAngle, radius));
    }
    if(projection) {
        pointsData2 = [];
        for(i in pointsData) {
            pointsData2.push([projection([pointsData[i][1],pointsData[i][0]])[0],projection([pointsData[i][1],pointsData[i][0]])[1]]);
        }
        return pointsData2;
    } else {
        return pointsData;
    }
}

//function to get destination points given an initial lat/lon, bearing, distance
//from http://www.movable-type.co.uk/scripts/latlong.html
function getDestinationPoint(lat,lon, brng, d) {
    var R = 6371; //earth's radius in km — change to whatever unit you plan on using (e.g. miles = 3959) 
    var deg2rad = Math.PI/180; var rad2deg = 180/Math.PI; 
    brng*=deg2rad; lat*=deg2rad; lon*=deg2rad; 
    var lat2 = Math.asin( Math.sin(lat)*Math.cos(d/R) +
                        Math.cos(lat)*Math.sin(d/R)*Math.cos(brng) );
    var lon2 = lon + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat),
                             Math.cos(d/R)-Math.sin(lat)*Math.sin(lat2));
    return  [lat2*rad2deg, lon2*rad2deg];              
}

在D3.js中绘制一个固定长度的圆圈

1 个答案: