d3.js, mapbox/листовки и метеорные анимации на картах

Question

Я хотел бы добавить анимированную строку к моей карте/карте буклета, которую я включил в свое приложение метеорита (что-то похожее на то, что можно увидеть здесь: D3, Leaflet animation) , Цель состоит в том, чтобы нарисовать большой круг/геодезическую дугу, которая соединяет две точки - без использования d3, я рисую статическую дугу со следующим кодом:

Template.explore.rendered =() -> 

    L.mapbox.accessToken = 'ACCESS_TOKEN_MAPBOX' 
    map = L.mapbox.map('map', 'MAP_ID', zoomControl: false) 
    countryPair = CountryPairs.findOne() 
    geojson = { 
     'type': 'FeatureCollection' 
     'features': [ 
     { 
      'type': 'Feature' 
      'geometry': 
      'type': 'Point' 
      'coordinates': [ 
       countryPair.country_a_longitude_dec 
       countryPair.country_a_latitude_dec 
      ] 
      'properties': 
      'name': 'Country A' 
     } 
     { 
      'type': 'Feature' 
      'geometry': 
      'type': 'Point' 
      'coordinates': [ 
       countryPair.country_b_longitude_dec 
       countryPair.country_b_latitude_dec 
      ] 
      'properties': 
      'name': 'Country B' 
     } 
     ] 
    } 
    markerLayer = L.mapbox.featureLayer(geojson).addTo(map) 

    map.fitBounds markerLayer.getBounds(), 
     paddingTopLeft: [ 
     30 
     70 
     ] 
     paddingBottomRight: [ 
     600 
     30 
     ] 

    # Code for geodesic 
    start = 
     x: countryPair.country_a_longitude_dec 
     y: countryPair.country_a_latitude_dec 
    end = 
     x: countryPair.country_b_longitude_dec 
     y: countryPair.country_b_latitude_dec 
    generator = new (arc.GreatCircle)(start, end, name: 'Great Arc') 
    line = generator.Arc(100, offset: 10) 
    L.geoJson(line.json()).addTo map 

Я с тех пор пытаюсь интегрировать d3 с этим кодом , но были проблемы с перетаскиванием переменной geojson. Использование кода в примере, публикуемый ранее (http://bl.ocks.org/zross/2f2baa1699b8ae38c768), я приложил к SVG к карте листовки следующим образом:

Template.explore.rendered =() -> 

    # Code as above... 
    markerLayer = L.mapbox.featureLayer(geojson).addTo(map) 

    svg = d3.select(map.getPanes().overlayPane).append('svg') 
    g = svg.append('g').attr('class', 'leaflet-zoom-hide') 

    d3.json geojson, (error, collection) -> 
     transform = d3.geo.transform(point: projectPoint) 
     d3path = d3.geo.path().projection(transform) 
     lineFeatures = g.selectAll('path').data(collection.features).enter().append('path').attr('class', (d) -> 
     d.properties.name 
    ).attr('style', 'opacity:0.5') 
     # Code continues as in example 

Однако, вместо этого я получаю сообщение об ошибке типа: Uncaught TypeError: Cannot read property 'features' of undefined, который не на этой линии:

lineFeatures = g.selectAll('path').data(collection.features).enter().append('path').attr('class', (d) -> 
      d.properties.name 
     ).attr('style', 'opacity:0.5') 

Мне интересно, будет ли функция d3.json вызываться до того, как набор данных «geojson» будет доступен, но я изо всех сил пытаюсь это исправить - любая помощь будет высоко оценена!

Answer 1

Это не ответ propper, но у меня нет репутации, чтобы комментировать (странно).

Интеграция этих двух зверей - очень мучительная задача. У меня есть результат с этим SVG Overlay Layer.

A plunker для демонстрации. Надеюсь, это может быть полезно.