Javascript D3 Clippath鼠标悬停事件不工作
巫师 我在clippath的鼠标悬停事件上遇到了一些麻烦。出于某种原因,它不会触发,我认为这是因为元素正在剪辑一个花花公子的图像 我的目标是提醒悬停元素的userid(示例中的1、2或3,即“dots”表中的第4个元素) 我已将其加载到JSFIDLE中: 有人能做到这一点吗?或者提出实现同样目标的另一种方法 HTML:Javascript D3 Clippath鼠标悬停事件不工作,javascript,jquery,d3.js,clip,clip-path,Javascript,Jquery,D3.js,Clip,Clip Path,巫师 我在clippath的鼠标悬停事件上遇到了一些麻烦。出于某种原因,它不会触发,我认为这是因为元素正在剪辑一个花花公子的图像 我的目标是提醒悬停元素的userid(示例中的1、2或3,即“dots”表中的第4个元素) 我已将其加载到JSFIDLE中: 有人能做到这一点吗?或者提出实现同样目标的另一种方法 HTML: <div class="projectbounds" style="width:400px; height:300px; background-color:#000000
<div class="projectbounds" style="width:400px; height:300px; background-color:#000000;"></div>
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();
我已将其加载到JSFIDLE中:
有人能帮忙吗 clipath实际上不是“绘制”的元素,如rect、circle等。。。因此,不必将事件侦听器放置在clipath中的圆圈元素上,您可以为mouseover事件创建相同圆圈的覆盖,并使这些圆圈透明
我创建了一个单独的函数来执行此操作:
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()之后调用drawerventcircles()