title: Two layers d3 map using on click event
body: <p>I am using d3 to create an interactive map using json file to create the boundaries but I stopped at the point where i need to show one layer in my case will be the capital cities and when it is clicked another layer will be created 
  for the smaller cities ,
  As all the data are in one json file but we can know if name_1 ==name_2 then it is a capital city (layer 1) else will be the smaller city(layer 2) appear only when layer 1 is clicked </p>
  
  <p>thats my code which shows both layer 1 and 2 at the same time</p>
  
  <pre><code>//Width and height
  var width = 600,
  height = 600
  
  var color = d3.scaleLinear()
  .range(["rgb(254,224,210)","rgb(252,146,114)","rgb(222,45,38)"]);
  
  //Define map projection //projection 
  var projection = d3.geoMercator()
                     .translate([0, 0])
                     .scale(1);
  
  //Define path generator
  var path = d3.geoPath()
               .projection(projection);
  
  //Create SVG element
  var svg = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height);
  
  svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", clicked);
  
  var g = svg.append("g");// &lt;g&gt; element is used to group SVG shapes together
  
  //Load in GeoJSON data
  d3.json("JOR_layer3.json", function(error,json) {//jordan.geo
  if (error) throw error;
  
  // Calculate bounding box transforms for entire collection
  var b = path.bounds( json ),
  s = 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
  t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
  
  console.log (json.features);
  
  json.features.forEach(function (d) {
    console.log (d.properties.NAME_1);
  })
  
  // Update the projection    
  projection
    .scale(s)
    .translate(t);
  
  //Bind data and create one path per GeoJSON feature
  g.append("g")
  .attr("id", "city-polygon")
  .selectAll("path")
     .data(json.features)
     .enter()
     .append("path")
     .attr("d", path)                   
     .style("fill", function (d, i) { //console.log (d);
      return color(i);})
     /*.style('stroke', 'white')
     .style('stroke-width', 0.7);*/
     .on("click", clicked);                   
  
  g.selectAll(".city-name")
    .data(json.features)
    .enter()
    .append("text")
    .attr("class", "city")
    .attr("transform", function(d) {
      var centroid = path.centroid(d),
        x = centroid[0],
        y = centroid[1];
        return "translate(" + x + "," + y + ")";
          // + "scale(1)"
          // + "translate(" + -x + "," + -y + ")";
    })
    .attr('text-anchor', 'middle')
    .text (function (d) { return d.properties.NAME_2; });   
  });
  
  function clicked(d) {
    var x, y, k;
  
    if (d &amp;&amp; centered !== d) {
      var centroid = path.centroid(d);
      x = centroid[0];
      y = centroid[1];
      k = 4;
      centered = d;
    } else {
      x = width / 2;
      y = height / 2;
      k = 1;
      centered = null;
    }
  
    g.selectAll("#path")
        .classed("active", centered &amp;&amp; function(d) { return d === centered; });
  
    g.transition()
    .duration(750)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
    .style("stroke-width", 1.5 / k + "px");
  }
  </code></pre>
  
  <p>and that sample of the json file</p>
  
  <pre><code>{"type":"FeatureCollection","bbox":[34.95763778686535,29.18587875366211,39.30208587646493,33.36817169189466],
  "features":[{"type":"Feature","properties":{"ID_0":116,"ISO":"JOR","NAME_0":"Jordan","ID_1":1,"NAME_1":"Ajlun","ID_2":1,"NAME_2":"Ajlun",
  "HASC_2":"JO.AJ.AJ","CCN_2":0,"CCA_2":null,"TYPE_2":"Nahia","ENGTYPE_2":"Sub-Province","NL_NAME_2":null,"VARNAME_2":"Ajlun"},
  "geometry":{"type":"Polygon","coordinates":[[[35.709953308105526,32.38688278198248],[35.7218132019043,32.38408279418957],[35.737407684326115,32.38139343261719],
  [35.740989685058594,32.380111694335994],[35.7465705871582,32.376800537109375],[35.706249237060604,32.372310638427734],[35.709953308105526,32.38688278198248]]]}},"type":"Feature","properties":{"ID_0":116,"ISO":"JOR","NAME_0":"Jordan","ID_1":1,"NAME_1":"Ajlun","ID_2":2,"NAME_2":"Kofranjah",
  "HASC_2":"JO.AJ.KF","CCN_2":0,"CCA_2":null,"TYPE_2":"Nahia","ENGTYPE_2":"Sub-Province","NL_NAME_2":null,"VARNAME_2":null},
  "geometry":{"type":"Polygon","coordinates":[[[35.74267196655279,32.16957473754883],[35.733383178710994,32.174312591552734],
  [35.72740554809576,32.17792892456055],[35.72211837768566,32.181858062744254],[35.754566192626896,32.18144989013672],[35.74267196655279,32.16957473754883]]]}}]}
  </code></pre>