- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
1.我用Leaflet画了一张GeoJSON map 。
2.使用D3在svg中创建一个节点
3.给节点绑定(bind)mouseover事件,但是没有生效
传单版本:1.5.1D3.js v5浏览器(带版本):Chrome 75.0.3770.80操作系统/平台(含版本):Windows 10
<div id="mapDiv"></div>
<script>
var style = {
color: "#586a77",
opacity: 1,
weight: 1.5,
fillColor: "#323c48",
fillOpacity: .8
}
var mymap = L.map("mapDiv", {
center: [33.027088, 109.467773],
zoom: 4,
zoomControl: false,
attributionControl: false,
minZoom: 1,
maxZoom: 18
})
// 用d3读取地图geojson数据
d3.json("data/geojson/world.json")
.then((data) => {
L.geoJSON(data, {
style: style
}).addTo(mymap);
var svg = d3.select("#mapDiv").select("svg");
var d_plane =
"M59.79,12.92C62.42,9.4,64,5.75,64,3.15a3.62,3.62,0,0,0-.49-2,1.6,1.6,0,0,0-.29-.37,1.68,1.68,0,0,0-.34-.27,3.56,3.56,0,0,0-2-.51c-2.6,0-6.25,1.58-9.77,4.21-2.84,2.13-5.69,5.12-9.62,9.27L39.34,15.7l-7.62-2.28,0,0a1.71,1.71,0,0,0,0-2.41L30.36,9.61a1.71,1.71,0,0,0-1.21-.5,1.68,1.68,0,0,0-1.21.5l-2.06,2.06-1.09-.33a1.71,1.71,0,0,0-.14-2.25L23.27,7.7a1.71,1.71,0,0,0-1.21-.5,1.67,1.67,0,0,0-1.2.5L19,9.59,11.21,7.27a1.94,1.94,0,0,0-.55-.08,2.05,2.05,0,0,0-1.43.58L6.5,10.5A1.61,1.61,0,0,0,6,11.62,1.56,1.56,0,0,0,6.85,13l16.3,9.11a2.84,2.84,0,0,1,.4.3l4.65,4.65C23.85,31.66,20,36.09,17,40L16.15,41,3.54,39.86H3.32a2.33,2.33,0,0,0-1.56.65L.49,41.76A1.58,1.58,0,0,0,0,42.89a1.55,1.55,0,0,0,.92,1.43l8.87,4.21a2.07,2.07,0,0,1,.34.24l.74.73a5.38,5.38,0,0,0-.35,1.71,2.24,2.24,0,0,0,.62,1.63l0,0h0a2.25,2.25,0,0,0,1.63.61,5.43,5.43,0,0,0,1.69-.35l.75.75a2,2,0,0,1,.23.33l4.2,8.85a1.57,1.57,0,0,0,1.41.93h0a1.58,1.58,0,0,0,1.12-.47l1.3-1.31a2.32,2.32,0,0,0,.62-1.56c0-.07,0-.13,0-.16L23,47.85,24,47c3.86-3,8.3-6.9,12.87-11.24l4.65,4.66a2.49,2.49,0,0,1,.3.4L51,57.13a1.58,1.58,0,0,0,2.54.37l2.74-2.74a2.08,2.08,0,0,0,.56-1.43,2,2,0,0,0-.07-.54L54.41,45l1.89-1.89a1.71,1.71,0,0,0,0-2.41l-1.39-1.38a1.71,1.71,0,0,0-2.25-.14l-.32-1.09,2.06-2.06a1.72,1.72,0,0,0,.5-1.21,1.69,1.69,0,0,0-.5-1.2L53,32.27a1.71,1.71,0,0,0-2.42,0h0L48.3,24.65l2.25-2.14C54.68,18.59,57.67,15.76,59.79,12.92Z"
var plane = svg.append("g").attr("id", "plane").attr("fill", "#108ee9").attr("stroke-width", 1).attr('height',
10).attr('width', 10)
plane.append("path").attr("d", d_plane)
function mouseOver(d) {
console.log("mouseOver");
}
function mouseOut() {
console.log("mouseOut");
}
d3.select("#plane").on("mouseover", mouseOver).on("mouseout", mouseOut);
})
</script>
我的完整示例代码是 https://github.com/liruifengv/leaflet/blob/master/test.html
最佳答案
如 this question 中所述, 传单集 pointer-events
CSS property对不应接收鼠标/触摸/指针事件的 HTML 元素设置为 none
。 Leaflet does so explicitly for the SVG containers :
// makes it possible to click through svg root; we'll reset it back in individual paths
this._container.setAttribute('pointer-events', 'none');
为了让特定的路径
接收鼠标/触摸/指针事件,Leaflet resets that CSS properties in specific paths by adding a CSS class :
if (layer.options.interactive) {
DomUtil.addClass(path, 'leaflet-interactive');
}
当然还有一个 matching bit in Leaflet's CSS rules :
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
因此,解决您的问题的一种方法是重置路径的 pointer-events
CSS 属性,例如:
plane.append("path").attr("d", d_plane).attr("style", "pointer-events: auto;");
或者设置它的 CSS 类,比如:
plane.append("path").attr("d", d_plane).attr("class", "leaflet-interactive");
重要提示:pointer-events
CSS property不同于 pointer-events
SVG attribute .其 pointer-events
CSS 属性设置为 none
的 SVG 路径将忽略其 pointer-events
SVG 属性的值。
关于javascript - D3.js 的鼠标悬停事件在 Leaflet 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56678008/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!