Question

我正在尝试动画a number of SVG paths on a Leaflet map。

使用D3js创建路径，D3js从GeoJSON文件中读取数据。

我正在寻找的动画是一种褪色的追踪效果。 This is exactly我正在寻找的结果。它是使用名为D3 Trail Layout的D3函数创建的。

但是，我无法让它在我的地图中工作。它不断抛出Invalid LatLng object: (NaN, NaN)错误。

这是我的代码的相关部分：

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

d3.json(geojson_path, function(error, collection) {

  var projection = d3.geo.transform({point: projectPoint}),
  path = d3.geo.path().projection(projection);

  /* The trail is inserted here */
  var trail = d3.layout.trail()
      .positioner(function(d) {return [d.lon,d.lat];})
      .coordType('coordinates');

  var trail_layout = trail.data(collection.features).layout();

  // Bind data    
  var feature = g.selectAll("path")
                .data(trail_layout)

  // Enter
  feature.enter().append("path");

  map.on("viewreset", reset);

  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bounds = path.bounds(collection),
    topLeft = bounds[0],
    bottomRight = bounds[1];

    svg .attr("width", bottomRight[0] - topLeft[0])
    .attr("height", bottomRight[1] - topLeft[1])
    .style("left", topLeft[0] + "px")
    .style("top", topLeft[1] + "px");

    g   .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

    feature.attr("d", path);
  }

  // Use Leaflet to implement a D3 geometric transformation.
  function projectPoint(x, y) {
    var point = map.latLngToLayerPoint(new L.LatLng(y, x));
    this.stream.point(point.x, point.y);
  }
});

有什么想法吗？

使用D3js在地图中创建淡化轨迹效果

0 个答案: