I made a d3 map with an overlay of a non-d3 div with information. The contents of the overlay div cannot be clicked despite a higher z-index.
The bits of code defining the z-index and other properties of the map and overlay div are shown below:
Main page HTML template:
<button ng-click="getLocation()">Find District by Current Location</button> <input class="zip_field" ng-model="selected_zip"></input> <button ng-click="findDistrictByZip()">Find District by Zip Code</button> {{warning}} <div id="map_holder"> </div> <div id="map_dialog"> </div>
#map_dialog HTML Subpattern:
<h4>District {{state_district.state}}-{{state_district.district}}</h4> <button ng-click="testFunc()">This Button Does Nothing</button> <div ng-repeat="rep in district_reps"> <div class="controls-row"> <h5>{{rep.title}}. {{rep.first_name}} {{rep.last_name}}</h5> </div>
#map_holder (base element) in Angular Controller:
svg = d3.select("#map_holder").append("svg").attr("width", width).attr("height", height) $scope.usMap = svg.append("g").attr("id", "map_with_districts") $scope.usMap.append("defs").append("path").attr("id", "land").datum(topojson.feature(us, us.objects.land)).attr "d", path $scope.usMap.append("clipPath").attr("id", "clip-land").append("use").attr "xlink:href", "#land" district = $scope.usMap.append("g").attr("class", "districts").attr("clip-path", "url(#clip-land)").selectAll("path").data(topojson.feature(congress, congress.objects.districts).features).enter().append("path").attr("d", path).text (d) -> "#{$scope.FIPS_to_state[d.id / 100 | 0]}-#{d.id % 100}" district.on("mouseover", () -> return tooltip.style("visibility", "visible").text(d3.select(this).text()) ).on("mousemove", () -> return tooltip.style("top", (event.pageY-27)+"px").style("left", (event.pageX+"px")) ).on("mouseout", () -> return tooltip.style("visibility", "hidden") ).on("click", () -> district_id = d3.select(this).text() $scope.state_district = {state: district_id.slice(0, 2), district: district_id.slice(3, 6)} $scope.$apply() ) $scope.usMap.append("path").attr("class", "district-boundaries").attr("clip-path", "url(#clip-land)").datum(topojson.mesh(congress, congress.objects.districts, (a, b) -> (a.id / 1000 | 0) is (b.id / 1000 | 0) )).attr "d", path $scope.usMap.append("path").attr("class", "state-boundaries").datum(topojson.mesh(us, us.objects.states, (a, b) -> a isnt b )).attr "d", path $('#map_holder').on("dblclick", () -> $scope.zoomOut() )
#map_dialog (overlay element) in Angular Controller:
// initialize as hidden dialog = d3.select("#map_dialog") .style("opacity", 1e-6) .style("z-index", "1000") // method toggling visibility $scope.showDistrictDialog = () -> $('#map_dialog').html($compile("<sub-view template='partial/district_reps'></sub-view>")($scope)) d3.select('#map_dialog') .transition() .duration(750) .style("opacity", 1)
CSS Properties: I did this intensively, usually setting the overlay position of the div to absolute. I tried various z-indexes and other positioning. I also tried nesting dom elements in different ways.
I tried to call stopPropogation in event handlers, I messed up with event-pointer: none, pointer-event: visible, etc., but these courses of action completely disable map events or do not work.
Placing the click handler on $ ('body'), which displays the target, likewise shows that clicks on this div are registered as clicks on the base map.
I took this screenshot below, trying to press a button in a superimposed div (sorry, my cursor was not in the screenshot). When you press the d3 button, the status object is highlighted below, and the button is not activated. He does not even press a button or does not notice a click at all.