Animating GeoJSON Paths in D3 + Leaflet
I am trying to wrap my head around a GeoJSON MultiLineString animation in D3. I've seen some helpful examples that involve using the Tween Dash-in SVG. At the moment I can draw GeoJSON on the map, but I am getting lost in how to work with my paths as SVG so that I can do Tween Dash. Any help or explanation would be so helpful.
Thank!
Here is my code:
Snapshot:
{"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 the 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 . Now I am getting some reasonable data from my logging showing the path length. I am now following ( this ) to animate the path. I feel like I am very close, but again, any help would be greatly appreciated. My updated code is here in this context ---> gist
UPDATE 2 . I can map my data in a static way. The gist of my updated code is here . NB: animation animation functions between animations are not called. Any help would be much appreciated!
source to share
Yours .selectAll
is executed in targetPath
, which is already a choice path
.
When you select the first item in the first selection item (for example d3.selectAll(".route")[0][0]
), you are doing the same thing .node()
that should give you the item associated with the selection. So:
d3.selectAll(".route")[0][0]
.. same:
d3.selectAll(".route").node()
Then your code tries to provide you with an element associated with any path elements that are children of your chosen one path
, which is not.
You should avoid using .node()
with selectAll
, as it will give you the first item in the selection, but your selection can have multiple items (and .node()
will only return one item). So, it doesn't, but you might have behavior that you don't expect.
source to share