D3 chloroplath地圖疊加隱藏工具提示

Question

我已經創建了d3 chloropleth地圖 - 每個城鎮的填充表示公共廣播電臺的捐贈數據。在城鎮上空進行移動會產生一個顯示相關數據的工具提示（即城鎮名稱，捐款數量）。我還用覆蓋廣播電臺信號覆蓋範圍的圓圈覆蓋了地圖。問題在於表示電臺信號的圓圈掩蓋了工具提示（基於城鎮/城市的路徑）。工具提示適用於未被信號圈覆蓋的城鎮。我嘗試移動信號svg元素在地圖前加載，但是然後地圖遮蔽了信號圈。任何關於如何使工具提示的想法繼續通過圈子發揮作用？先謝謝你。

的DOM的基本結構是：

<div id="map"> 
    <div class="tooltip"> 
     <p>town</p> 
     <p>amount</p> 
    </div> 
    <svg> 
     <rect id="mapbg"></rect> 
     <g class="state"> 
      <path .... </path> 
      <path .... </path> 
     </g> 
     <g class="signals"> 
      <circle ... </circle> 
     </g> 
    </svg> 
</div> 

Answer 1

這聽起來像這裏的問題是，界正在接受指針事件意味着他們腳下的路。假設你不需要圈子響應鼠標事件，你可以設置樣式的圈子pointer-events: none：

circle { 
    pointer-events: none; 
} 

在這裏看到一個演示：http://jsfiddle.net/cnakf/ - 如果你刪除pointer-events: none，你會看到該矩形不再響應。