D3正交投影中的圆形裁剪和投影

Question

D3正交投影中的圆形裁剪和投影

javascriptd3.jsprojectionorthographic

10

我正在处理这个，在圆形元素超出90度的截断角度后，我无法剪切红色圆形。另外，是否有一种方法可以将投影应用于红色圆形，以使其相对于正交角度看起来像在地球表面？目前它们只是相对于屏幕的2D圆。

- Tom Stove

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Davies · Accepted Answer

不必使用<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);