En utilisant d3 dans la notice

C'est une question de suivi pour mon autre .

Http://fiddle.jshell.net/zw8TR/16/

J'ai réussi à utiliser d3 pour visualiser l'itinéraire entre mes marqueurs de cartes. J'ai utilisé cet exemple de Mike Bostock comme guide.

La raison pour laquelle j'utilise d3 pour cela au lieu de Leaflets construit dans Polyline, c'est parce que j'aimerais expérimenter l'interpolation de d3 pour supprimer certaines routes et créer des arc pour les autres (pour les itinéraires de vol). À ce stade, j'essaie simplement de trouver un moyen de faire en sorte que ceux-ci fonctionnent pour toutes les routes.

Les exemples que j'ai vus utilisent uniquement la méthode interpolate() avec d3.svg.line() , alors que l'intégration de la brochure nécessite d'utiliser d3.geo.path() . Y at-il une place dans mon code où il est possible d'utiliser cette méthode avec d3.geo.path() ?

Un autre lien éventuellement utile .

Et un autre .

Merci pour toute aide.

Faire cela est un peu plus désordonné que d'utiliser d3.geo.path parce que cela implémente déjà toutes les fonctionnalités que vous avez besoin pour les cartes, mais c'est certainement possible. L'idée est d'extraire la liste des coordonnées utilisateur du chemin géo et de les traduire en coordonnées d'écran dans la fonction de line . Cette traduction peut être effectuée dans les fonctions .x() et .y() de la ligne.

 var path1 = d3.svg.line() .interpolate("cardinal") .x(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).x; }) .y(function(d) { return map.latLngToLayerPoint(new L.LatLng(d[1], d[0])).y; });

Maintenant, il suffit d'extraire les coordonnées de la fonctionnalité.

 feature.attr("d", function(d) { return path1(d.geometry.coordinates); });

Exemple complet ici .