4

非 d3 div に情報を重ねて d3 マップを作成しました。オーバーレイ div のコンテンツは、z-index が高いにもかかわらずクリックできません。

マップの 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 インデックスやその他の配置を試しました。また、さまざまな方法で dom 要素をネストしようとしました。

イベント ハンドラーで stopPropogation を呼び出してみました。pointer-event:none、pointer-event:visible などをいじりましたが、これらの一連のアクションは、マップ イベントを完全に無効にするか、効果がありません。

イベント ターゲットを出力する $('body') にクリック ハンドラーを配置すると、同様に、この div のクリックが基になるマップのクリックとして登録されることが示されます。

オーバーレイ div のボタンをクリックしようとしたときに、以下のスクリーンショットを撮りました (申し訳ありませんが、カーソルがスクリーンショットにありませんでした)。ボタンをクリックすると、下の d3 状態オブジェクトが強調表示され、ボタンはアクティブ化されていません。ボタンを押したり、クリックしたりすることさえありません。

4

1 に答える 1

0

上記の問題は、Angular でサブテンプレートとしてレンダリングされたマップをオーバーレイするはずの要素がインスタンス化され、D3 メソッドを使用して変更されたために発生したことが判明しました。このサブテンプレートのコンテンツを取得し、オーバーレイしているマップと同じ HTML ファイルに配置し、そのコンテンツの非表示/表示を切り替えることで、問題が修正されました。

于 2013-09-04T20:30:48.797 に答える