如何让我的线条与地球一起旋转？

Question

以在绘制地球仪后动态添加位置/点和红线。（本质上，我想动态添加数据，而不是像示例那样从一组固定的点开始）。绘制红色虚线，但随着地球旋转，这些线保持在相同位置。如何让我的线条像示例中那样随地球旋转？我的小提琴： https: //jsfiddle.net/6qhvt8aL/2/

  var width = 960,

    height = 500;

  var proj = d3.geoOrthographic().scale(230).translate([width / 2, height / 2]).clipAngle(90);

  var path = d3.geoPath().projection(proj).pointRadius(1.5);

  var graticule = d3.geoGraticule();

  var london = [-0.118667702475932, 51.5019405883275];

  var time = Date.now();

  var rotate = [39.666666666666664, -30];

  var velocity = [.015, -0];

  var lineToLondon = function(d) {

    return path({

      "type": "LineString",

      "coordinates": [london, d.geometry.coordinates]

    });

  }

  function stripWhitespace(str) {

    if (!str) {

      return "";

    }

    return str.replace(" ", "");

  }

  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)

  svg.call(d3.drag().on("start", dragstarted).on("drag", dragged));

  queue().defer(d3.json, "https://openlayers.org/en/latest/examples/data/topojson/world-110m.json").defer(d3.json, "/static/destinations.json").await(ready);

  var places = {

    "type": "FeatureCollection",

    "features": [{

      "type": "Feature",

      "properties": {

        "name": "San Francisco"

      },

      "geometry": {

        "type": "Point",

        "coordinates": [-122.417168773552248, 37.769195629687431]

      }

    }, {

      "type": "Feature",

      "properties": {

        "name": "Chicago"

      },

      "geometry": {

        "type": "Point",

        "coordinates": [-87.752000832709314, 41.831936519278429]

      }

    }, {

      "type": "Feature",

      "properties": {

        "name": "Los Angeles"

      },

      "geometry": {

        "type": "Point",

        "coordinates": [-118.243683, 34.052235]

      }

    }

Answer 1

您可以在刷新功能中更新除行之外的所有内容，您只需要更新它们即可。您不能使用，svg.selectAll(".lines").attr("d", lineToLondon)因为您有一个包含该类的所有路径的g类。lines相反，您可以使用： svg.selectAll("path.lines").attr("d", lineToLondon);需要注意的一件事是，您的代码中不需要这些行：svg.selectAll(".lines").attr("d", (d) => {  if (d) {    return lineToLondon(d);  }});这是这些更改的更新小提琴。