问Leaflet + D3 -在Safari上无鼠标悬停

EN

您可以尝试在D3.js JavaScript中实现以下代码，而不是使用CSS：

var feature = g.selectAll("path")
        .data(collection.features)
    .enter().append("path").attr('style','z-index:9999')
    .on("mouseover", function() {
        d3.select(this).css("fill", "green").css("stroke", "red");
    })
    .on("mouseout", function() {
        d3.select(this).css("fill", "").css("stroke", "");
    });

我发现使用JavaScript来应用样式比尝试使用CSS来应用样式更高效、更容易维护，除非您专门使用类。在这种情况下，我将使用.classed()方法(https://github.com/mbostock/d3/wiki/Selections#wiki-classed)来管理类的添加和删除。

希望这能有所帮助！如果没有，很抱歉。:-/

编辑1个

我对其进行了编辑，以包括鼠标输出功能。在更深入地研究这一点之后，Leaflet的事情只是引入了新的图像，而不是重新绘制SVG，而这正是D3.js所做的。我唯一的猜测是忽略了路径元素的z索引。当您右键单击路径区域，然后从下拉列表中选择Inspect Element时，这一点很明显。在Chrome上，它会显示path元素的超文本标记语言，但在Safari上，它会显示传单内容所拉入的图像的超文本标记语言。