當它覆蓋可點擊的d3元素時，無法點擊div

Question

我製作了一個帶有信息覆蓋的非d3 div的d3貼圖。儘管z-index更高，覆蓋div的內容不可點擊。提供

的代碼限定的z索引和地圖的其他屬性和覆蓋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> 

#map_hold呃在角控制器（基本元素）定義：

 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（重疊元素）的定義：

// 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上的點擊被註冊爲底層地圖上的點擊。

的我把this screenshot下面試圖單擊覆蓋DIV按鈕（對不起我的光標是不是在截圖）。當點擊按鈕d3時，下面的狀態對象被高亮顯示，並且按鈕沒有被激活。它甚至沒有壓下按鈕或根本沒有注意到點擊。

Answer 1

事實證明，上述問題的發生是因爲應該覆蓋地圖的元素，該地圖作爲Angular的子模板呈現，使用D3方法進行實例化和修改。通過獲取此子模板的內容並將其與其覆蓋的地圖放在同一個HTML文件中，然後切換該內容的隱藏/顯示來解決問題。