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...
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") ...the changemap function never declared because you're missing function keyword.
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(); }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...
Comments
Post a Comment