Question

我试图在同一个div中更新4个制图。

首先，我创建4个原始地图，每个地图都在自己的svg中，如下所示：

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 （）不是函数。每个区域都是一个路径数组，每个路径都有一个数据属性。我已经尝试了几种选择路径无效的方法，而且我现在有点迷失了。谢谢你的帮助

在同一容器中更新几个d3.js制图

0 个答案: