Question

我试图绕过D3中的GeoJSON MultiLineString动画。我已经看到了一些有用的examples，其中涉及使用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>

Logging PathNode给我：

null

更新：我现在从记录中获取了一些合理的数据，显示了路径长度。我现在关注（this）示例来设置路径的动画。我觉得我非常接近，但是再一次，任何帮助都会非常感激。我的更新代码在这里要点---＆gt; gist

更新2 ：我能够以静态方式将数据绘制到地图上。我更新的代码的要点是here。注意：未调用补间动画模式动画函数。任何帮助将不胜感激！

Answer 1

您的.selectAll已在targetPath上执行，该path已经是d3.selectAll(".route")[0][0]的选择。

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

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

..与：

相同

path

然后，您的代码会尝试为您提供与所选.node()子项的所有路径元素相关联的元素，其中没有。{/ p>

您应该尽量避免将selectAll与.node()一起使用，因为它会为您提供选择中的第一个元素，但您的选择可能包含多个元素（{{1}}只会返回一个元素）。所以，这没有错，但它可能有你不期望的行为。

在D3 + Leaflet中设置GeoJSON路径的动画

1 个答案: