CODEWITHSUNDEEP
javascriptsvgd3.js
bernie2436
bernie2436

Reputation: 23901

Having trouble panning and zooming on my d3 map

I have this map in d3 

http://107.170.20.64/

that renders topojson with a custom projection and path, like this

var projection = d3.geo.mercator().translate([width / 2, height / 2]).scale(width * 185).center([-89.99, 29.975]);
var path = d3.geo.path().projection(projection);

I am trying to adapt it so that it pans and zooms using Bostock's tutorial. Here is the function that fires once the topojson loads (showing my adaptations of Bostock's method): 

   function ready(error, us) {
        var zoom = d3.behavior.zoom()
            .translate([0, 0])
            .scale(1)
            .scaleExtent([1, 8])
            .on("zoom", zoomed);

        var features = svg.append("g");

        features.append("g")
            .attr("class", "precincts")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.orleansgeojson).features)
            .enter().append("path")
            .attr("class", (function(d) {
                return wards.get(d.id) + " precinct";
            }))
            .attr("title", (function(d) {
                return votesone.get(d.id) + "-" + votestwo.get(d.id);
            }))
            .attr("id", function(d) {
                return d.id;
            })
            .attr("d", path);

        svg.append("rect")
            .attr("class", "overlay")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);

        function zoomed() {
            features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            features.select(".precinct").style("stroke-width", 1.5 / d3.event.scale + "px");
        }

Somehow, zoomed is never getting called. If I set a breakpoint on zoomed it never catches. I think that the final append to svg calls zoom which somehow sets up a d3 behavior that creates listeners for mouse events and calls the zoomed function. That's what I understand so far about what is going on (clarification or detailed answers would be great). Is the problem that the listeners are not getting set? If so, how do I debug why they are not getting set? The overlay shows up in my svg -- it just does not seem to be picking up mouse events.

Upvotes: 0

Views: 498

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The problem in your case is unrelated to the zoom behaviour. You're setting the z-index of the div containing the map to be -1. This means that it's behind the containing div, which gets all the mouse events. So the map is "obscured" by the element that contains it.

To fix, either set the z-index of the map div to be higher than -1, or set the z-index of all the containing elements (including the body) to be -1 or less.

Upvotes: 1

Related Questions