score:2

Accepted answer

1- To generate first iteration click on Region equal country

//GENERATE FIRST MAP 
        dataArray  = data;
        redraw(); 

2- To generate counties for example on click on region, we should first set startprojection and endprojection in zoom function and then trigger redraw of circles

  //zoom to selected provinces features:
   var countiesFeatureCollection = { "type":"FeatureCollection", "features": countiesFeatures }
  //manipulate counties And Redraw
   manipulateCounties(data,countiesFeatures);
   baseProjection.fitExtent([[50,50],[width-50,height-50]],countiesFeatureCollection);
   projection.fitExtent([[50,50],[width-50,height-50]],countiesFeatureCollection);
   redraw(countiesFeatureCollection,"counties");                                 
   if ( projection.translate().toString() === baseProjection.translate().toString() && projection.scale() === baseProjection.scale() ) 
   {
    zoom(baseProjection,projection.fitExtent([[50,50],[width-50,height-50]],countiesFeatureCollection));
    }
    else 
    {
       var endProjection = d3.geoMercator();
       zoom(projection,endProjection.fitExtent([[50,50],[width-50,height-50]],countiesFeatureCollection));
    }

3-the same thing should be applied to communities

var endProjection = d3.geoMercator();
endProjection.fitExtent([[50,50],[width-50,height-50]],communesfeatureCollection);
projection.fitExtent([[50,50],[width-50,height-50]],communesfeatureCollection);
redraw(communesfeatureCollection,"communes");
if ( projection.translate().toString() === projectioncommune.translate().toString() && projection.scale() === projectioncommune.scale()){

  zoom(projectioncommune,projection.fitExtent([[50,50],[width-50,height-50]],communesfeatureCollection));
}

else {
      var endProjection = d3.geoMercator();
      zoom(projection,endProjection.fitExtent([[50,50],[width-50,height-50]],communesfeatureCollection));
}

4- Then reinitialise to go to first step 1 by

      // start rendering points again
      baseProjection.fitSize([width,height],regions);
      projection.fitSize([width,height],regions);
      //GENERATE AGAIN THE FIRST MAP 
      dataArray  = data;
      redraw();                                                                 
      zoom(projection,baseProjection);

ATTACHED WORKING PEN


Related Query