圆形剪辑和投影与D3正交

Question

我正在努力解决这个问题,我在修剪红色圆圈元素方面遇到了麻烦,因为它们出现在地球上甚至超过90˚的夹角.此外,是否有一种方法可以将投影应用于红色圆圈,因为看起来它们相对于正交角度位于地球表面？目前它们只是相对于屏幕显示为2d圈.

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