d3.js鼠标事件不起作用 [英] d3.js mouse events not working
问题描述
我有以下问题:我制作了一个力图，其中仅包含渲染为圆的节点.一切正常，我可以在悬停时更改颜色，单击它们并删除一些.
I have the following problem: I made a force graph containing of only nodes rendered as circles. Everything worked fine, I could change the color on hover, click on them and delete some.
我编写了此函数，以获得所需的行为，具体取决于传递的数据值.今天早上它奏效了，但是当我试图向朋友展示我的所作所为时，交互作用就完全停止了.我没有收到任何错误消息. .on(mouseover) .on(mouseout)和.on(click)事件以某种方式出了问题.该功能似乎没有被解雇.我确定我保留了代码正常工作时的代码.在过去的几个小时中，我一直试图找出问题所在.
I wrote this function to get the desired behavior depending on which data value is passed. It worked this morning but when I tried to show a friend what I had made suddenly the interaction stopped working completely. I don't get any error messages. Somehow something is wrong with the .on(mouseover) .on(mouseout) and .on(click) events. The functions don't seem to be fired. I am sure that I left the code as it was when it was working. I have tried figuring out the problem for the past couple of hours.
function filterFor(data) {
var expression = data;
d3.selectAll("circle")
.on("mouseover", mouseOver)
.on("mouseout", mouseOut)
.on("click", mouseClick);
function mouseOver() {
d3.select(this).style("fill", "#ff4747");
div.transition()
.duration(300)
.style("opacity", 1.0);
switch (expression) {
case 'study':
div.html(d.study)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 50) + "px");
d3.selectAll("circle").filter(function(d1, i) {
return d1.study === d.study
}).style("fill", "#ff4747");
break;
case 'year':
div.html(d.year)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 50) + "px");
d3.selectAll("circle").filter(function(d1, i) {
return d1.year === d.year
}).style("fill", "#ff4747");
break;
}
}
function mouseOut(d) {
console.log("mouseout fired");
d3.select(this).style("fill", "#222222");
d3.selectAll("circle").style("fill", "#222222");
}
function mouseClick(d) {
console.log("mouseout fired");
switch (expression) {
case 'study':
d3.selectAll('circle').each(function(d1) {
if (d1.study !== d.study) {
d3.select(this)
.attr("r", d1.radius)
.transition()
.duration(500)
.attr("r", 0)
.each("end", function() {
d3.select(this).remove();
});
} else {
d3.select(this).attr("r", d1.radius)
.transition()
.duration(200)
.attr("r", d1.radius * 1.5);
force.charge(-100);
force.start();
}
});
break;
case 'year':
d3.selectAll('circle').each(function(d1) {
if (d1.year !== d.year) {
d3.select(this)
.attr("r", d1.radius)
.transition()
.duration(500)
.attr("r", 0)
.each("end", function() {
d3.select(this).remove();
});
} else {
d3.select(this).attr("r", d1.radius)
.transition()
.duration(200)
.attr("r", d1.radius * 1.5);
force.charge(-100);
force.start();
}
});
break;
}
force.alpha([1.0]);
}
}
这是我在这个平台上的第一个问题，希望有人可以帮助我. d3.js的所有其他相关工作正常.例如，生成节点并进行碰撞.问题必须出在鼠标事件之内.
This is my first question on this platform, hopefully someone can help me. Everything else d3.js related is working fine. For example the nodes are generated and collision works. The problem must lie within the mouse events.
推荐答案
我在CSS文件中发现了问题.无论出于什么原因，我都决定给svg容器一个负的z-index.因此，我的鼠标事件均未触发.
I found the problem in my css file. For whatever reason I at some point decided to give the container of the svg a negative z-index. So none of my mouse events fired.
感谢echonax提供了带有小提琴的小提琴.通过解剖那里的代码来弄清楚它.
Thanks to echonax for the tip with the fiddle. Figured it out by dissecting the code there.
这篇关于d3.js鼠标事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
