Использование d3 в брошюре

Question

Это следующий вопрос к my other one.

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

мне удалось использовать d3 визуализировать маршрут между моими маркерами карты. В качестве руководства я использовал this example Майком Бостоком.

Причина, по которой я использую d3 для этого вместо листов, построенных в Polyline, заключается в том, что я хотел бы поэкспериментировать с интерполяцией d3, чтобы сгладить некоторые маршруты, а также создать дугу для других (для маршрутов полета). На этом этапе, однако, я просто пытаюсь найти способ заставить их работать на всех маршрутах.

примеров, которые я видел только использовать метод interpolate() с d3.svg.line(), в то время как интеграция листовки требует от меня, чтобы использовать d3.geo.path(). Есть ли место в моем коде, где можно использовать этот метод с d3.geo.path()?

Возможно, возможно, helpful link.

И another.

Спасибо за любую помощь.

Answer 1

Выполнение этого является более беспорядочным, чем использование d3.geo.path, поскольку это уже реализует все функциональные возможности шаблона, необходимые для карт, но это, безусловно, возможно. Идея состоит в том, чтобы извлечь список координат пользователя из гео-пути и перевести их на экранные координаты в функции line. Этот перевод может быть выполнен в функциях линии .x() и .y().

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

Теперь нам просто нужно извлечь координаты из этой функции.

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

Полный пример here.