1

我创建了一个 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>
4

1 回答 1

1

听起来这里的问题是圆圈正在接收指向它们下方路径的指针事件。假设您不需要圆圈来响应鼠标事件，您只需将圆圈上的样式设置为pointer-events: none：

circle {
   pointer-events: none;
}

在此处查看演示：http: //jsfiddle.net/cnakf/ - 如果您删除pointer-events: none，您会看到 rect 不再响应。

于 2013-06-28T21:58:41.063 回答