javascript - 带有传单的 d3 中沿路径的不正确过渡

Question

在 d3 v3 的帮助下，我正在尝试在传单 osm 贴图上创建平面动画。这些是我用来在两个位置之间的路径上旋转和移动平面元素的代码。飞机沿路径移动，但未正确对齐。这是完整的代码:

var defaultlocation = [28.6139, 77.2090];
var defaultzoom = 5;
var map = L.map('map', {
  center: defaultlocation, // default map location //
  zoom: defaultzoom,
  minZoom: 2
});

var mbAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Contributors',
  mbUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

var mapTileLayer = L.tileLayer(mbUrl, {
  attribution: mbAttr
});

map.addLayer(mapTileLayer);

map._initPathRoot();

var w = $("#map").innerWidth();
var h = $("#map").innerHeight();

var svg = d3.select(map.getPanes().overlayPane).select(".leaflet-zoom-animated");

var cords = [{
  id: 1,
  lat: 28.6139,
  lon: 77.2090
}, {
  id: 2,
  lat: 19.0760,
  lon: 72.8777
}];

var links = [{
  source: 1,
  target: 2
}];

for (var i in cords) {
  cords[i].LatLng = new L.LatLng(cords[i].lat, cords[i].lon);
}

var linkgroup = svg.selectAll(".linkgroup")
  .data(links)
  .enter().append("g")
  .attr("class", "linkgroup");

var planes = linkgroup.append("path")
  .attr("class", "plane")
  .attr("visibility", "hidden")
  .attr("d", "m25.21488,3.93375c-0.44355,0 -0.84275,0.18332 -1.17933,0.51592c-0.33397,0.33267 -0.61055,0.80884 -0.84275,1.40377c-0.45922,1.18911 -0.74362,2.85964 -0.89755,4.86085c-0.15655,1.99729 -0.18263,4.32223 -0.11741,6.81118c-5.51835,2.26427 -16.7116,6.93857 -17.60916,7.98223c-1.19759,1.38937 -0.81143,2.98095 -0.32874,4.03902l18.39971,-3.74549c0.38616,4.88048 0.94192,9.7138 1.42461,13.50099c-1.80032,0.52703 -5.1609,1.56679 -5.85232,2.21255c-0.95496,0.88711 -0.95496,3.75718 -0.95496,3.75718l7.53,-0.61316c0.17743,1.23545 0.28701,1.95767 0.28701,1.95767l0.01304,0.06557l0.06002,0l0.13829,0l0.0574,0l0.01043,-0.06557c0,0 0.11218,-0.72222 0.28961,-1.95767l7.53164,0.61316c0,0 0,-2.87006 -0.95496,-3.75718c-0.69044,-0.64577 -4.05363,-1.68813 -5.85133,-2.21516c0.48009,-3.77545 1.03061,-8.58921 1.42198,-13.45404l18.18207,3.70115c0.48009,-1.05806 0.86881,-2.64965 -0.32617,-4.03902c-0.88969,-1.03062 -11.81147,-5.60054 -17.39409,-7.89352c0.06524,-2.52287 0.04175,-4.88024 -0.1148,-6.89989l0,-0.00476c-0.15655,-1.99844 -0.44094,-3.6683 -0.90277,-4.8561c-0.22699,-0.59493 -0.50356,-1.07111 -0.83754,-1.40377c-0.33658,-0.3326 -0.73578,-0.51592 -1.18194,-0.51592l0,0l-0.00001,0l0,0z");

var linkpath = linkgroup.append('path')
  .attr("class", "linkpath")
  .style("fill", "none");

var markergroup = svg.selectAll(".markergroup")
  .data(cords)
  .enter().append("g")
  .attr("class", "markergroup")
  .attr("cursor", "pointer")
  .on("mousedown", function(d) {
    console.log(d);
  });


var markercircle = markergroup.append("circle")
  .attr("class", "markercircle")
  .on("mousedown", function(d) {
    console.log(d);
  });





function getcordsbyid(id) {
  for (var i in cords) {
    if (cords[i].id == id) {
      return cords[i].LatLng;
    }
  }
}

map.on("viewreset", update);
update();
fly(1, 2, true);

function transition(plane, route, nonstop) {
  var l = route.node().getTotalLength();
  plane.attr("visibility", "visible");
  plane.transition()
    .duration(l * 30)
    .attrTween("transform", delta(plane, route.node()))
    .each("end", function() {
      if (nonstop) {
        transition(plane, route, nonstop);
      } else {
        plane.attr("visibility", "hidden");
      }
    });
}

function delta(plane, path) {
  return function(i) {
    return function(t) {
      var l = path.getTotalLength();
      var p = path.getPointAtLength(t * l);

      var t2 = Math.min(t + 0.05, 1);
      var p2 = path.getPointAtLength(t2 * l);

      var x = p2.x - p.x;
      var y = p2.y - p.y;
      var r = 90 - Math.atan2(-y, x) * 180 / Math.PI;

      var s = Math.min(Math.sin(Math.PI * t) * 0.7, 0.5);
      return "translate(" + p.x + "," + p.y + ") scale(" + s + ") rotate(" + r + ")";
    }
  }
}

function fly(sourceid, targetid, nonstop) {
  linkgroup.filter(function(l) {
    if (l.source == sourceid && l.target == targetid) {
      return l;
    }
  }).each(function(l) {
    var route = d3.select(this).select(".linkpath");
    var plane = d3.select(this).select(".plane");
    transition(plane, route, nonstop);
  });

}


function update() {

  markergroup.attr("transform", function(d) {
    var cor = map.latLngToLayerPoint(d.LatLng);
    return "translate(" + cor.x + "," + cor.y + ")";
  });


  linkgroup.each(function(d, i) {
    var route = d3.select(this).select(".linkpath").attr("d", function(l) {
      var slatlong = map.latLngToLayerPoint(getcordsbyid(l.source));
      var tlatlong = map.latLngToLayerPoint(getcordsbyid(l.target));

      var dx = tlatlong.x - slatlong.x,
        dy = tlatlong.y - slatlong.y,
        dr = Math.sqrt(dx * dx + dy * dy) * 3;
      return "M" + slatlong.x + "," + slatlong.y + "A" + dr + "," + dr +
        " 0 0,1 " + tlatlong.x + "," + tlatlong.y;
    });
  });

}

html,
body,
#map {
  width: 100%;
  height: 100%;
}

.linkpath {
  stroke: #FF2EB9;
  stroke-dasharray: 10, 10;
  stroke-width: 2
}

.markercircle {
  stroke: black;
  fill: green;
  r: 5;
  cursor: pointer;
}

.plane {
  stroke: black;
  stroke-width: 3;
  fill: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='map'></div>

delta() 是否有任何错误，或者是因为我没有使用 geojson 路径？

Answer 1

现在动画是正确的:如果你看飞机左翼的尖端，它就在粉线上方。

因此，问题在于您没有考虑飞机的 <path> 的大小。元素本身。

一个简单的解决方案是获取它的宽度:

var planesSize = planes.node().getBBox().width; 

并更改 delta 的返回值功能:

return "translate(" + (p.x + (planesSize / 2 * s)) + 
    "," + (p.y + (planesSize / 2 * s)) + ") scale(" + s + ") rotate(" + r + ")";

下面是修改后的代码:

var defaultlocation = [28.6139, 77.2090];
var defaultzoom = 5;
var map = L.map('map', {
  center: defaultlocation, // default map location //
  zoom: defaultzoom,
  minZoom: 2
});

var mbAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Contributors',
  mbUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

var mapTileLayer = L.tileLayer(mbUrl, {
  attribution: mbAttr
});

map.addLayer(mapTileLayer);

map._initPathRoot();

var w = $("#map").innerWidth();
var h = $("#map").innerHeight();

var svg = d3.select(map.getPanes().overlayPane).select(".leaflet-zoom-animated");

var cords = [{
  id: 1,
  lat: 28.6139,
  lon: 77.2090
}, {
  id: 2,
  lat: 19.0760,
  lon: 72.8777
}];

var links = [{
  source: 1,
  target: 2
}];

for (var i in cords) {
  cords[i].LatLng = new L.LatLng(cords[i].lat, cords[i].lon);
}

var linkgroup = svg.selectAll(".linkgroup")
  .data(links)
  .enter().append("g")
  .attr("class", "linkgroup");

var linkpath = linkgroup.append('path')
  .attr("class", "linkpath")
  .style("fill", "none");

var planes = linkgroup.append("path")
  .attr("class", "plane")
  .attr("visibility", "hidden")
  .attr("d", "m25.21488,3.93375c-0.44355,0 -0.84275,0.18332 -1.17933,0.51592c-0.33397,0.33267 -0.61055,0.80884 -0.84275,1.40377c-0.45922,1.18911 -0.74362,2.85964 -0.89755,4.86085c-0.15655,1.99729 -0.18263,4.32223 -0.11741,6.81118c-5.51835,2.26427 -16.7116,6.93857 -17.60916,7.98223c-1.19759,1.38937 -0.81143,2.98095 -0.32874,4.03902l18.39971,-3.74549c0.38616,4.88048 0.94192,9.7138 1.42461,13.50099c-1.80032,0.52703 -5.1609,1.56679 -5.85232,2.21255c-0.95496,0.88711 -0.95496,3.75718 -0.95496,3.75718l7.53,-0.61316c0.17743,1.23545 0.28701,1.95767 0.28701,1.95767l0.01304,0.06557l0.06002,0l0.13829,0l0.0574,0l0.01043,-0.06557c0,0 0.11218,-0.72222 0.28961,-1.95767l7.53164,0.61316c0,0 0,-2.87006 -0.95496,-3.75718c-0.69044,-0.64577 -4.05363,-1.68813 -5.85133,-2.21516c0.48009,-3.77545 1.03061,-8.58921 1.42198,-13.45404l18.18207,3.70115c0.48009,-1.05806 0.86881,-2.64965 -0.32617,-4.03902c-0.88969,-1.03062 -11.81147,-5.60054 -17.39409,-7.89352c0.06524,-2.52287 0.04175,-4.88024 -0.1148,-6.89989l0,-0.00476c-0.15655,-1.99844 -0.44094,-3.6683 -0.90277,-4.8561c-0.22699,-0.59493 -0.50356,-1.07111 -0.83754,-1.40377c-0.33658,-0.3326 -0.73578,-0.51592 -1.18194,-0.51592l0,0l-0.00001,0l0,0z");

var planesSize = planes.node().getBBox().width;

var markergroup = svg.selectAll(".markergroup")
  .data(cords)
  .enter().append("g")
  .attr("class", "markergroup")
  .attr("cursor", "pointer")
  .on("mousedown", function(d) {
    console.log(d);
  });


var markercircle = markergroup.append("circle")
  .attr("class", "markercircle")
  .on("mousedown", function(d) {
    console.log(d);
  });





function getcordsbyid(id) {
  for (var i in cords) {
    if (cords[i].id == id) {
      return cords[i].LatLng;
    }
  }
}

map.on("viewreset", update);
update();
fly(1, 2, true);

function transition(plane, route, nonstop) {
  var l = route.node().getTotalLength();
  plane.attr("visibility", "visible");
  plane.transition()
    .duration(l * 30)
    .attrTween("transform", delta(plane, route.node()))
    .each("end", function() {
      if (nonstop) {
        transition(plane, route, nonstop);
      } else {
        plane.attr("visibility", "hidden");
      }
    });
}

function delta(plane, path) {
  return function(i) {
    return function(t) {
      var l = path.getTotalLength();
      var p = path.getPointAtLength(t * l);

      var t2 = Math.min(t + 0.05, 1);
      var p2 = path.getPointAtLength(t2 * l);

      var x = p2.x - p.x;
      var y = p2.y - p.y;
      var r = 90 - Math.atan2(-y, x) * 180 / Math.PI;

      var s = Math.min(Math.sin(Math.PI * t) * 0.7, 0.5);
      return "translate(" + (p.x + (planesSize / 2 * s)) + "," + (p.y + (planesSize / 2 * s)) + ") scale(" + s + ") rotate(" + r + ")";
    }
  }
}

function fly(sourceid, targetid, nonstop) {
  linkgroup.filter(function(l) {
    if (l.source == sourceid && l.target == targetid) {
      return l;
    }
  }).each(function(l) {
    var route = d3.select(this).select(".linkpath");
    var plane = d3.select(this).select(".plane");
    transition(plane, route, nonstop);
  });

}


function update() {

  markergroup.attr("transform", function(d) {
    var cor = map.latLngToLayerPoint(d.LatLng);
    return "translate(" + cor.x + "," + cor.y + ")";
  });


  linkgroup.each(function(d, i) {
    var route = d3.select(this).select(".linkpath").attr("d", function(l) {
      var slatlong = map.latLngToLayerPoint(getcordsbyid(l.source));
      var tlatlong = map.latLngToLayerPoint(getcordsbyid(l.target));

      var dx = tlatlong.x - slatlong.x,
        dy = tlatlong.y - slatlong.y,
        dr = Math.sqrt(dx * dx + dy * dy) * 3;
      return "M" + slatlong.x + "," + slatlong.y + "A" + dr + "," + dr +
        " 0 0,1 " + tlatlong.x + "," + tlatlong.y;
    });
  });

}

html,
body,
#map {
  width: 100%;
  height: 100%;
}

.linkpath {
  stroke: #FF2EB9;
  stroke-dasharray: 10, 10;
  stroke-width: 2
}

.markercircle {
  stroke: black;
  fill: green;
  r: 5;
  cursor: pointer;
}

.plane {
  stroke: black;
  stroke-width: 3;
  fill: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='map'></div>

PS:在航线路径之后附加飞机路径。否则，飞机将在航线下方飞行，而不是航线上方。