I have a simple code here some map with zoom+pan effect. It work fine on Opera, Chrome even IE. But Firefox do not show it.-

If you open "Inspector" panel, you'll see has same values (translation, scale, path, d**) on Firefox than the other, but don't render properly.

Obviously is Firefox's bug cause on other browser works nice and D3 generate the code correctly.-

And here same map without zoom+pan effects, Firefox show it nice. Some google do not gave me any reference, console operation give the right value.

Any idea what's going wrong?

Here an snapshot. Can you see path.county's size?

enter image description here

(*) code take it from Mike's site: http://bl.ocks.org/mbostock/5914438 He use:

var projection = d3.geo.mercator()
    .scale((1 << 12) / 2 / Math.PI)
    .translate([width / 2, height / 2]);


var zoom = d3.behavior.zoom()
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 11, 1 << 14])
    .translate([width - center[0], height - center[1]])
    .on("zoom", zoomed);


<svg width="600px" height="500px" transform="translate(5579.288888888889,-2536.2020481280824)scale(32768)"><path class="county" d="M239.07661387245844,54.......

If I change the zoom variable to the following, it works also in Firefox:

var zoom = d3.behavior.zoom().on("zoom", function() {
        dptos.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

I hope it helps.

  • Hi @nipro, thank for help. But, same problem. I've added a screenshot to guidance.-
    – Klaujesi
    Feb 25 '15 at 21:48
  • I have prepared a JSFiddle. It works also with Firefox.
    – nipro
    Feb 26 '15 at 8:28
  • Yeap, its works in Firefox. But I need to limit zoom behavior. I think is a bug with .scaleExtent() in Firefox. Maybe there is a conflict with zoom function, maybe D3 override Firefox's function.
    – Klaujesi
    Feb 26 '15 at 13:53
  • What about using two values in the array of .scaleExtent? var zoom = d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", function() { dptos.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }); It seems to have the same functionality and it also limits the zoom.
    – nipro
    Feb 26 '15 at 21:48
  • Hi @nipro. No luck. True is I need to move on and can't waste more time on this. Firefox won the infamous msg: "Your browser is not compatible con this site. Get a new one without bugs". Thanks for your time and help.-
    – Klaujesi
    Feb 26 '15 at 23:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.