如何检测圆是否在d3中顺时针平移

Question

我正在使用 d3 和 d3 地理缩放库来使用地球仪功能。

几乎所有事情都完成了，但有一个问题。

我用元素g画了一个圆，当我们旋转地球时它会随着路径旋转，但主要问题是当路径落后时元素g应该被隐藏，现在当旋转时路径落后时点会显示出来，所以当地图路径落后时，在地球上隐藏点的最佳解决方案是什么。

      var zoom = d3.geo.zoom()
     .projection(projection)
    .scaleExtent([minScale, maxScale])
     .on("zoomstart", function() {
        // TODO inertial drag
        if (d3.event.sourceEvent) svg.selectAll("path").classed("focus", false);      
    })
    .on("zoom",function() {
        if (d3.event.sourceEvent) {
          d3.event.sourceEvent.preventDefault();
        }
        d3.select(this).call(redraw);
        suppressClick = true;   

    })
    .on("zoomend", function() {
    svg.classed("zooming", false);
    });
    function redraw(svg) {
  svg.selectAll('path')
    .attr('d', function (d) {
      var g = d3.select(this);
      return path.pointRadius(g.classed('focus') || g.classed('focus-hover') ? 9.5 : 7.5)(d);
    });

  var cluster = svg.selectAll('g.cluster')
    .each(function (d) {
      d.projected = null;         
      d3.geo.stream(d, projection.stream({point: function (x, y) {
        d.projected = [x, y];
      }}));

      var circle = d3.select(this).select('circle.cluster');
      circle.attr('r', circle.classed('focus-hover') ? 9.5 : 8.5);
    })
    .attr('transform', function (d) {
      return 'translate(' + (d.projected || 0) + ')';
    });     
    g.selectAll('g.cluster').attr("transform", function(d) {return "translate(" + projection([d[1],d[0]]) + ")";});
    /*.style('display', function (d) {
      return d.projected ? null : 'none';
    })
    .attr('transform', function (d) {
      return 'translate(' + (d.projected || 0) + ')';
    });*/

  var displayLocation = projection.scale() > maxScale - 0.1;
  svg.classed('zoomed', displayLocation);

  if (displayLocation) {
    cluster.selectAll('.location')
      .style('display', null)
      .attr('r', function (d) {
        var circle = d3.select(this);
        return circle.classed('focus') || circle.classed('focus-hover') ? 9.5 : 7.5;
      });
    cluster.selectAll('.label').style('display', null);
  } else {
    cluster.selectAll('.location').style('display', 'none');
    cluster.selectAll('.label').style('display', 'none');
  }
}

Answer 1

一种方法是隐藏它们。将 CSS display 设置为 none，当它们出现在地球后面时，即当它们的任何位置不在 [-90,90] 的纬度或经度范围内时。

您可以添加从projection.rotate() 获得的yaw 和pitch 角（分别相当于longitude 和纬度）到圆的每个对应的经度/纬度坐标。如果结果超出范围隐藏它（display: none），否则显示它（display:block）。你可以这样开始：

d3.selectAll("circle").style("display", function(d) {
    return d[0] + projection.rotate()[0] < 90
        && d[0] + projection.rotate()[0] > -90
        && d[1] + projection.rotate()[1] < 90
        && d[1] + projection.rotate()[1] > -90  ? "block" : "none";
})