向导,
我在剪辑路径上的鼠标悬停事件上遇到了一些问题。由于某种原因,它没有触发,我认为这是因为元素正在剪切花花公子的图像。
我的目标是提醒悬停元素的用户 ID(示例中的 1、2 或 3 - “点”表中的第四个元素)。
我已将其加载到 jsfiddle 中:
https://jsfiddle.net/vk1jc8ah/4/
有人可以让它发挥作用 - 或者提出实现相同目标的另一种方法吗?
HTML:
<div class="projectbounds" style="width:400px; height:300px; background-color:#000000;"></div>
JS:
var size = 30,
w = 400,
h = 300,
dots = [];
dots.push([101, 200, 0, 1, 1]);
dots.push([170, 120, 0, 2, 1]);
dots.push([210, 150, 0, 3, 1]);
var svg = d3.select(".projectbounds")
.append("svg:svg")
.attr("id", "robsvg")
.attr("width", w)
.attr("height", h)
.style("cursor", "pointer");
var defs = svg.append("svg:defs");
var imgbg = svg.append('svg:image')
.attr('xlink:href', 'http://www.empireonline.com/images/features/100greatestcharacters/photos/7.jpg')
.attr('x', 0)
.attr('y', 0)
.attr('width', w)
.attr('height', h)
.attr('clip-path', 'url(#robclip)');
var robs = defs.append("svg:clipPath").attr("id", "robclip");
function redraw() {
for (var d in dots) {
robs.append("circle")
.attr("class", function () {
return "userid" + dots[d][4] + " bgtier" + dots[d][3];
})
.attr("cx", function () {
return dots[d][0];
})
.attr("cy", function () {
return dots[d][1];
})
.attr("r", size + 1)
.attr("onmouseover", function() { ////// not triggering...
return "alertid()"; ////// not triggering...
});
}
}
function alertid(){
alert("hi");
}
redraw();
我已将其加载到 jsfiddle 中:
https://jsfiddle.net/vk1jc8ah/4/
有人可以帮忙吗?
最佳答案
Clipath 实际上并不是“绘制”元素,如矩形、圆形等...因此,您可以为鼠标悬停事件创建相同圆形的覆盖,而不是将事件监听器放置在 Clipath 内的圆形元素上,并使这些圆圈透明。
我创建了一个单独的函数来执行此操作:
function drawEventCircles() {
for (var d in dots) {
svg.append("circle")
.attr("cx", function () {
return dots[d][0];
})
.attr("cy", function () {
return dots[d][1];
})
.attr("r", size + 1)
.attr("fill", "transparent")
.on("mouseover", function() {
alertid();
}
);
}
}
然后只需在调用 redraw() 后调用 drawEventCircles() 即可;
关于javascript - D3 Clippath 鼠标悬停事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33191321/