d3.js - 在 D3 + Leaflet 中动画化 GeoJSON 路径

Question

我正在尝试在 D3 中为 GeoJSON MultiLineString 制作动画。我看到了一些有用的 examples从那涉及到使用 SVG 的 Tween Dash-ing。此时，我可以将 GeoJSON 绘制到 map 上，但我不知道如何将我的路径作为 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

更新:我现在从我的日志记录中得到了一些有意义的数据，显示了路径长度。我现在正在按照 ( this) 示例为路径设置动画。我觉得我很亲近，但同样，我们将不胜感激任何帮助。我更新的代码在这个要点中---> gist

更新 2:我能够以静态方式将我的数据绘制到 map 上。我更新代码的要点是 here .注意:没有调用 tween-dash 动画函数。任何帮助将不胜感激!

Answer 1

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

当您在选择的第一项中选择第一项时(如 d3.selectAll(".route")[0][0])，您正在做与 .node() 做的，这是给你与选择相关联的元素。所以:

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

..等同于:

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

然后，您的代码会尝试为您提供与任何路径元素关联的元素，这些元素是您选择的 path 的子元素，但没有。

你应该尽量避免将 .node() 与 selectAll 一起使用，因为它会给你选择中的第一个元素，但你的选择可能包含多个元素(并且 .node() 将只返回一个元素)。所以，这并没有错，但它的行为可能出乎您的意料。