在D3 + Leaflet中为GeoJSON路径添加动画效果

Question

在D3 + Leaflet中为GeoJSON路径添加动画效果

3

我试图理解如何在D3中对GeoJSON MultiLineString进行动画处理。我看到了一些有用的示例，其中涉及使用SVG的Tween Dash-ing技术。目前，我可以将GeoJSON绘制到地图上，但是我不知道如何处理我的路径作为SVG，以便可以使用Tween Dash。任何帮助或解释都会很有帮助。

谢谢！

以下是我的相关代码：

数据片段：

{"type": "FeatureCollection","features": [ {"type":"Feature","geometry":{"type": "MultiLineString", "coordinates":[[[-74.12706, 40.734680000000004], [-74.12199000000001, 40.73335], [-74.12036, 40.734730000000006], [-74.15457, 40.71811], [-74.18125, 40.71041],...

并且代码：

$(document).ready(function(){
    getData();  

});

var map = new L.Map("map", {center: [40.7127, -74.0059], zoom: 6})
    .addLayer(new L.TileLayer("http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.jpg"));

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

function getData(){
    console.log("Called getData()");

    queue()
        .defer(d3.json, '/data/test_lines_linestring.json') 
        .await(makemap)     
}

function makemap(error, data){

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

    var route = g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("class", "route")


    var targetPath = d3.selectAll(".route")[0][0]
    var pathNode = d3.select(targetPath).selectAll('path').node();
    console.log(targetPath)
    console.log(pathNode)

记录TargetPath会给我这个结果：

<path class="route" d= "M632,352L633,352L633,352L631,353L630,..."></path>

记录 PathNode 给我：

null

更新：我现在可以从我的日志中获取一些有用的数据，显示路径长度。我正在遵循 (这个) 示例来动画化路径。我感觉我已经非常接近了，但是任何帮助都将不胜感激。我更新后的代码在这里 ---> gist 更新2：我能够以静态方式将我的数据绘制到地图上。我的更新后的代码的要点在这里。注意：tween-dash动画函数没有被调用。任何帮助都将不胜感激！

- bdkauff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elijah · Accepted Answer

您的.selectAll是在targetPath上执行的，而targetPath已经是一个path的选择。

当您选择选择中第一个项目的第一个项目（例如d3.selectAll(".route")[0][0]）时，您正在执行与.node()相同的操作，即为您提供与选择相关联的元素。所以：

 d3.selectAll(".route")[0][0]

...与以下内容相同：

 d3.selectAll(".route").node()

因此，您的代码试图提供与所选path的任何路径元素相关联的元素，但其中没有这样的元素。

应该避免在selectAll中使用.node()，因为它将给您选择中的第一个元素，但您的选择可能由多个元素组成（.node()只会返回一个元素）。所以，这不是错误，但它可能具有您不希望出现的行为。