Changing maps by mouse click (onclick event) with D3.js -

i need change 1 map clicking on it. wrote code, doesn't work.

part of code map drawing , changing:

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

any appreciated.

four obvious problems stand out...

1. mymap shouldn't enter() selection. should save update selection instead, not enter() selection later call data(), enter(), append(), this:

   var mymap = svg.selectall("path")     .data(topojson.feature(map0, map0.objects.countries).features);  mymap.enter().append("path")     .attr("d", path)     .attr("class", "state")     ... 

2. the changemap function never declared because you're missing function keyword.

3. in changemap, cannot exit() enter() selection. again, need take care save update selection can enter/exit/etc without chaining:

   function changemap(map) {     mymap = mymap.data(topojson.feature(map, map.objects.countries).features);     mymap.enter().append("path");     mymap.attr("d", path);     mymap.exit().remove(); } 

4. you shouldn't call changemap(map1) parameter on(). should provide event handler on() can call when event happens:

   .on("click", function() {     changemap(map1); }); 

you may have other problems code should fix these problems before proceed...