我制作了一个 d3 地图，其中包含一个带有信息的覆盖非 d3 div。尽管 z-index 较高，但覆盖 div 的内容不可点击。
下面提供了定义 z-index 和地图的其他属性以及覆盖 div 的代码位：
主页 HTML 模板：
<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 子模板：
<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>
Angular 控制器中的#map_holder（底层元素）定义：
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()
)
Angular 控制器中的#map_dialog（覆盖元素）定义：
// 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 属性： 我已经对这些进行了广泛的修改，通常将覆盖 div 的位置设置为绝对。我尝试了各种 z 索引和其他定位。我也尝试过以不同的方式嵌套 dom 元素。
我尝试在我的事件处理程序中调用 stopPropogation，我已经搞砸了指针事件：无、指针事件：可见等，但是这些操作过程要么完全禁用地图事件，要么没有效果。
在 $('body') 上放置一个单击处理程序以打印出事件目标，类似地表明对该 div 的单击被注册为对基础地图的单击。
我在尝试单击覆盖 div 中的按钮时截取了下面的屏幕截图（对不起，我的光标不在屏幕截图中）。单击按钮后，下面的 d3 状态对象被突出显示，并且按钮未被激活。它甚至根本不会按下按钮或注意到点击。