javascript - 同じコンテナー内の複数の d3.js カートグラムを更新する

Question

同じ div で 4 つのカートグラムを更新しようとしています。

最初に、次のように、それぞれ独自の svg で 4 つの元のマップを作成します。

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);

 });
}

この部分はうまく機能し、4 つのマップを作成します。この後、各マップのパスをcartogram.jsによって計算されたパスで更新したいと考えています。問題は、各マップのパスデータにアクセスできないことです。これが私がやろうとしていることです:

...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];
      });

ネストされた選択を取得しています。各マップのパスの配列です。これcartogramsは私が必要としていたものですが、内部でforEachはエラー region.data() is not a function が発生します。各領域はパスの配列であり、それぞれがデータ プロパティを持っています。私は無駄にパスを選択するいくつかの方法を試しましたが、今は少し迷っています。ご協力いただきありがとうございます