如何修改我的函数以添加随机源？

Question

我正在修改this example，以便我可以动态添加位置。我需要修改lineToLondon 函数以使其接受动态源。现在，它每次都将伦敦作为来源。在我的小提琴中，我定义了一个名为lineToLocation 的新函数，它试图做到这一点，但我似乎无法让它工作。我得到Uncaught TypeError: Cannot read property 'coordinates' of undefined

我的小提琴可以在这里找到：https://jsfiddle.net/p0r6tmqs/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]
    });
  }
  var lineToLocation = function(src, d) {
    return path({
      "type": "LineString",
      "coordinates": [src, 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]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Vancouver"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-123.116226, 49.246292]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Calgary"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-114.062019, 51.044270]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Barcelona"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [2.154007, 41.390205]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Berlin"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [13.404954, 52.520008]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Paris"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [2.349014, 48.864716]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Cologne"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [6.953101, 50.935173]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Geneva"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [6.143158, 46.204391]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Fethiye"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [29.1263, 36.6592]
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Edinburgh"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.188267, 55.953251]
      }
    }]
  };

  addLocations(places);

  function addLocations(places) {
    svg.append("g").attr("class", "points")
      .selectAll("text").data(places.features)
      .enter().append("path")
      .attr("class", "point")
      .attr("d", path);
    svg.append("g").attr("class", "lines")
      .selectAll(".lines").data(places.features)
      .enter().append("path")
      .attr("class", "lines")
      .attr("id", d => stripWhitespace(d.properties.name))
      .attr("d", d => lineToLondon(d));

    var texas = ["95.3698", "29.7604"];
    var russia = ["105.3188", "61.5240"];
    var china = ["104.1954", "35.8617"];
    var all = [texas, russia, china];
    var randomElement = all[Math.floor(Math.random() * all.length)];

    refresh(randomElement);

  }

  function ready(error, world, places) {
    $.getJSON("https://openlayers.org/en/latest/examples/data/topojson/world-110m.json", function(world) {
      svg.append("circle").attr("cx", width / 2).attr("cy", height / 2).attr("r", proj.scale()).attr("class", "noclicks").attr("fill", "none");
      svg.append("path").datum(topojson.object(world, world.objects.land)).attr("class", "land").attr("d", path);
      svg.append("path").datum(graticule).attr("class", "graticule noclicks").attr("d", path);
      svg.append("g").attr("class", "countries").selectAll("path").data(topojson.object(world, world.objects.countries).geometries).enter().append("path").attr("d", path);
      refresh();
      spin();
    });
  }

  function refresh(src) {
    svg.selectAll(".land").attr("d", path);
    svg.selectAll(".countries path").attr("d", path);
    svg.selectAll(".graticule").attr("d", path);
    svg.selectAll(".point").attr("d", path);
    svg.selectAll("path.lines").attr("d", lineToLocation);
  }

  var timer;

  function spin() {
    timer = d3.timer(function() {
      var dt = Date.now() - time;
      proj.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
      refresh();
    });
  }

  function dragstarted() {
    timer.stop();
    v0 = versor.cartesian(proj.invert(d3.mouse(this)));
    r0 = proj.rotate();
    q0 = versor(r0);
  }

  function dragged() {
    var v1 = versor.cartesian(proj.rotate(r0).invert(d3.mouse(this))),
      q1 = versor.multiply(q0, versor.delta(v0, v1)),
      r1 = versor.rotation(q1);
    proj.rotate(r1);
    refresh();
  }

Answer 1

我不知道你是如何初始化 src 但是， 我写没问题

  var lineToLocation = function(d, src) { //src after d
    return path({
      "type": "LineString",
      "coordinates": [src, d.geometry.coordinates]
    });
  }

但如果你只想改变来源，为什么不改变伦敦的坐标呢？