CODEWITHSUNDEEP
d3.jsgeojson
bdkauff
bdkauff

Reputation: 245

Animating GeoJSON paths in D3 + Leaflet

I'm trying to wrap my head around animating GeoJSON MultiLineString in D3. I've seen some helpful examples from that involves using Tween Dash-ing of the SVG. At this point, I'm able to draw GeoJSON to the map, but I get lost as to how to work with my paths as SVG so that I can do Tween Dash. ANy help or explanation would be so helpful.

Thanks!

Here is my relevant code:

Data snippet:

{"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],...

And code:

$(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)

Logging TargetPath gives me this:

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

Logging PathNode gives me:

null

UPDATE: I'm now getting some sensible data out of my logging, showing a path length. I'm now following (this) example to animate the path. I feel like I'm very close, but again, any help would be much appreciated. My updated code is in this gist here ---> gist

UPDATE 2: I'm able to draw my data to the map in a static manner. Gist of my updated code is here. NB: the tween-dash animation functions are not being called. Any help would be much appreciated!

Upvotes: 3

Views: 1426

Answers (1)

Elijah
Elijah

Reputation: 4639

Your .selectAll is executed on targetPath, which is already a selection of a path.

When you select the first item in the first item of a selection (like d3.selectAll(".route")[0][0]) you're doing the same thing that .node() does, which is to give you the element associated with the selection. So:

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

..is the same as:

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

Your code, then, is trying to give you the element associated with any path elements that are children of your selected path, of which there are none.

You should try to avoid using .node() with selectAll, since it will give you the first element in a selection, but your selection may consist of multiple elements (and .node() will only return one element). So, it's not wrong, but it might have behavior you don't expect.

Upvotes: 2

Related Questions