D3 missing zoom Choropleth + Raster

Question

Following this example and Choropleth from Mike's site I am trying to get:

image + vector + choropleth = my map

As you can see I lost the zoom capability on the vector layer. I have been trying differents things, but nothing works.

How can I fix that?

Answer 1

You need to update your paths in the zoomed function. The original example does this on line 68.

The simplest thing to do is to use the counties variable store a reference to the selection of paths:

counties = topojson.feature(us, us.objects.barrios);
counties = svg.selectAll("path")
    .data(counties.features)
  .enter()
    .append("path")
    .attr("class","county feature")
    .attr("d", path);

Inside of the zoomed function, after the projection is updated, put:

counties.attr("d", path);

And your counties will update accordingly when the map zooms.

Here's all the JS when I was running locally:

var width = 900;
height = 500;

var color = d3.scale.threshold()
  .domain([3, 6, 9, 12, 15, 18, 21, 24, 27])
  .range(["#fff7f3", "#fde0dd", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177", "#49006a"]);

var tile = d3.geo.tile()
  .size([width, height]);

var projection = d3.geo.mercator()
  .scale((1 << 20) / 2 / Math.PI)
  .translate([width / 2, height / 2]);

var center = projection([-58.8, -27.48]);

var path = d3.geo.path()
  .projection(projection);

var zoom = d3.behavior.zoom()
  .scale(projection.scale() * 2 * Math.PI)
  .scaleExtent([1 << 19, 1 << 22])
  .translate([width - center[0], height - center[1]])
  .on("zoom", zoomed);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var raster = svg.append("g");

var vector = svg.append("path");
var counties, tiles;

d3.json("d/barrios_1.topojson", function(error, us) {
  svg.call(zoom);
  //vector.datum(topojson.feature(us, us.objects.barrios));
  tiles = tile
    .scale(zoom.scale())
    .translate(zoom.translate())
    ();
  projection
    .scale(zoom.scale() / 2 / Math.PI)
    .translate(zoom.translate());

  counties = topojson.feature(us, us.objects.barrios);
  counties = svg.selectAll("path")
    .data(counties.features)
    .enter()
    .append("path")
    .attr("class", "county feature")
    .attr("d", path);
  //.on("click", clicked);

  console.log("counties", counties);

  svg.selectAll(".county")
    .style("fill", function(d) {
      return color(+d.properties.casos);
    })
    .append("svg:title")
    .text(function(d) {
      return d.properties.Name + " - " + d.properties.casos + " caso/s";
    });

  zoomed();
});

function zoomed() {
  //var
  svg.call(zoom);
  tiles = tile
    .scale(zoom.scale())
    .translate(zoom.translate())
    ();

  projection
    .scale(zoom.scale() / 2 / Math.PI)
    .translate(zoom.translate());

  counties.attr("d", path);

  svg.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");

  var image = raster
    .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
    .selectAll("image")
    .data(tiles, function(d) {
      return d;
    });

  image.exit()
    .remove();

  image.enter().append("image")
    .attr("xlink:href", function(d) {
      return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/examples.map-i86nkdio/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";
    })
    .attr("width", 1)
    .attr("height", 1)
    .attr("x", function(d) {
      return d[0];
    })
    .attr("y", function(d) {
      return d[1];
    });
}