title: Changing maps by mouse click (onclick event) with D3.js
body: <p>I need to change one map to another by clicking on it. I wrote some code, but it doesn't work.</p>
  
  <p>Part of the code for map drawing and changing:</p>
  
  <pre><code>var projection = d3.geo.mercator()
  .scale(550)
  .translate([mapWidth / 2, mapHeight / 2]);
  
  var path = d3.geo.path()
  .projection(projection);
  
  var svg = d3.select("body").append("svg")
  
  queue()
  .defer(d3.json, mapFile0)
  .defer(d3.json, mapFile1)
  .await(ready);
  
  
  function ready(error, map0, map1) {
  
   var myMap = svg.selectAll("path")
   .data(topojson.feature(map0, map0.objects.countries).features)
   .enter().append("path")
   .attr("d", path)
   .attr("class", "state")
   .style("fill", "#cccccc")
   .style("stroke", "#ffffff")
   .on("click", changemap(map1));
  
    changemap(map) {
    myMap.data(topojson.feature(map, map.objects.countries).features)
   .enter().append("path")
   .attr("d", path)
   .exit().remove();
   }
  
  });
  </code></pre>
  
  <p>Any help appreciated.</p>