score:0

Accepted answer

the issue is how you add the paths to the map:

// initial path creation:
var vector = map.append("path");

// adding data to the path once the data is loaded:
vector.data(topojson.feature(topo, topo.objects.foo).features);

// updating the path data when zoomed:
 vector.attr("d", path);

the initial append, map.append("path"), only creates one path element. once you load your data you bind data to the selection, vector.data(...). since your data is an array of several features, but your selection only holds one path element, you only update the one existing path with new data.

your selection vector, however, now holds an enter selection: vector.enter(), which contains a placeholder element for each item in the data array for which a path element does not already exist. these are never appended and consequently are never drawn or updated. instead, you need to use the d3 enter/update/exit cycle correctly, the easiest way here would be to use something like:

var vector = map.selectall("path") // select all paths assuming all paths are to be features. this can be selectall(null) too - we want an empty selection so that all features are entered.
  .data(features)     // bind data to them
  .enter()            // get the enter selection (placeholders for new elements that must be added so that an element exists for each item in the data array).
  .append("path");   // append new paths and return them in a new selection.

then we can update on zoom the same as before.

http://bl.ocks.org/andrew-reid/e3f242b645f167cb17d470246764ef4d


Related Query

More Query from same tag