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

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

  }

});

这是这些更改的更新小提琴。