D3等值线图叠加隐藏工具提示

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，您会看到矩形不再响应。