Updating several d3.js cartograms in the same container

75 Views Asked by At

I'm trying to update 4 cartograms in the same div.

First I create 4 original maps, each in its own svg, like this:

function makeMaps(data){
  var mapsWrapper = d3.select('#maps');
  data.forEach(function(topoJSON,i){
  var quantize = d3.scale.quantize()
  .domain([0, 1600000])
  .range(d3.range(5).map(function(i) { return "q" + i; }));

  var layer = Object.keys(topoJSON.objects)[0]
  var svg = mapsWrapper.append('svg')
    .attr("class","mapa")
    .attr({
        width: "350px",
        height: "350px"
    });

  var muns = svg.append("g")
    .attr("class", "muns")
    .attr("id",layer)
    .selectAll("path");

  var geometry = topoJSON.objects[layer].geometries;
  var carto = cartos[i]
  var features = carto.features(topoJSON, geometry),
    path = d3.geo.path()
      .projection(projections[i]);

  muns.data(features)
    .enter()
    .append("path")
    .attr("class", function(d) {
      return quantize(d.properties['POB1']);
    })
    .attr("d", path);

 });
}

This part works well and creates 4 maps. After this, I want to update the paths in each map with the paths calculated by cartogram.js. The problem is that I can't get to the path data in each of the maps, here's what I'm trying to do:

...some code to calculate cartogram values
var cartograms = d3.selectAll(".mapa").selectAll("g").selectAll("path")
cartograms.forEach(function(region,i){
  region.data(carto_features[i])
      .select("title")
      .text(function (d) {
        return d.properties.nom_mun+ ': '+d.properties[year];
      });

In cartograms I'm getting a nested selection: an array of paths for each map, which is what I though I needed, but inside the forEach I get the error region.data() is not a function. Each region is an array of paths each of which has a data property. I've tried with several ways of selecting the paths to no avail and I'm a little lost now. Thanks for your help

0

There are 0 best solutions below