圈夹与凸起D3正投影(Circle clip and projection with D3 orth

我工作的这个 ，我有，因为他们出现在地球上，甚至过去90˚角夹剪报红圈元素的麻烦。 此外，有没有您可以将投影到红色圆圈的方式，在所以看起来他们是相对于正投影角度地球的表面上？ 目前，他们只是出现相对于屏幕的二维圆。

Answer 1:

而不是使用的<circle>元素，你可以使用GeoJSON的点几何：

{type: "Point", coordinates: [λ, φ]}

这些然后可以通过D3的投影系统裁剪，这取决于您所设置的clipAngle。 所以，你可能有这样的：

var path = d3.geo.path().projection(…);

data.forEach(function(d) {
  svg.append("path")
      .datum({type: "Point", coordinates: [d.Lon, d.Lat]})
      .attr("d", path.pointRadius(d.Magnitude));
});

注意如何点的半径是通过每个点设置的路径。 您还可以设置pointRadius是一个函数，所以你可以这样做：

var path = d3.geo.path()
    .projection(…)
    .pointRadius(function(d) { return d.radius; });

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
    })
    .attr("class", "point")
    .attr("d", path);

你问题的第二部分询问是否圈可真地理界。 d3.geo.circle可以产生地理特征圆（再次，如以GeoJSON），这将在适当的限幅：

var path = d3.geo.path().projection(…),
    circle = d3.geo.circle();

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return circle
           .origin([d.Lon, d.Lat])
           .angle(d.Magnitude)();
    })
    .attr("class", "point")
    .attr("d", path);

文章来源: Circle clip and projection with D3 orthographic