d3.js，地图盒/传单和流星 - 地图上的动画

我想添加一个动画线到我的地图盒/传单地图我已经纳入我的流星应用程序（类似于可以在这里看到的东西：D3, Leaflet animation）。其目的是绘制连接两个点的大圆/大地弧 - 不使用D3，我画用下面的代码静态弧：d3.js，地图盒/传单和流星 - 地图上的动画

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')

我想知道是否在'geojson'数据集可用之前调用了d3.json函数，但我正在努力纠正这一点 - 任何帮助将非常感谢！

来源

2015-04-08 Budgie

请不要在互联网上发布您的访问令牌。 –

哎呀，感谢您的注意！ – Budgie

您是否已将geojson记录到控制台（'console.log（geojson）'）并检查它是否具有您想要的结构？ – user1614080

这不是一个propper答案，但我没有评论的声誉（怪异）。

整合这两个野兽是一个非常痛苦的任务。这个SVG Overlay Layer有一些结果。

A plunker来演示。我希望这会有所帮助。

来源

2015-04-11 14:55:39

谢谢@jonatas，看起来不错 - 我实际上已经结束了一个简单的CSS svg动画，但欣赏指南！ – Budgie

d3.js，地图盒/传单和流星 - 地图上的动画

回答

相关问题