4

我制作了一个 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 状态对象被突出显示，并且按钮未被激活。它甚至根本不会按下按钮或注意到点击。

4

1 回答 1

0

事实证明，之所以出现上述问题，是因为应该覆盖地图的元素（使用 Angular 渲染为子模板）是使用 D3 方法实例化和修改的。通过获取此子模板的内容并将其放在与它所覆盖的地图相同的 HTML 文件中，然后为该内容切换隐藏/显示，该问题已得到解决。

于 2013-09-04T20:30:48.797 回答