非 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 状態オブジェクトが強調表示され、ボタンはアクティブ化されていません。ボタンを押したり、クリックしたりすることさえありません。