Question

我制作了一张带有信息的非d3 div的d3地图。尽管具有更高的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 Controller中的

#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 Controller中的

#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-index和其他定位。我也试过以不同的方式嵌套dom元素。

我已经尝试在我的事件处理程序中调用stopPropogation，我已经搞乱了指针事件：无，指针事件：可见等，但这些操作过程要么完全禁用地图事件，要么无效。< / p>

在$（'body'）上设置打印出事件目标的点击处理程序，同样表明此div上的点击被注册为基础地图上的点击。

我尝试点击覆盖div中的按钮时，下面的 this screenshot （抱歉我的光标不在屏幕截图中）。点击按钮d3后，状态对象突出显示，按钮未被激活。它甚至没有按下按钮或完全注意到点击。

Answer 1

事实证明上面发生的问题是因为应该覆盖地图的元素（使用Angular呈现为子模板）使用D3方法进行实例化和修改。通过获取此子模板的内容并将其放在与其重叠的地图相同的HTML文件中，然后切换该内容的隐藏/显示来解决该问题。

当它覆盖可点击的d3元素时，无法单击div

1 个答案: