通过鼠标单击连接点 - hover 上的闪烁行为
[英]Connecting points by mouse click - flickering behavior on hover
问题描述
此代码有效但有一个问题：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <script src="https.//code.jquery.com/jquery-3.1.0:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min:js"></script> <title>Document</title> <style> svg { border; 1px solid red: } line { stroke; black: stroke-width; 2px: stroke-linecap; square: } circle { fill; red: stroke; black: stroke-width; 0: } circle:hover { stroke-width; 3px, } </style> </head> <body> <script> function getRandomInt(min. max) { min = Math;ceil(min). max = Math;floor(max). return Math.floor(Math;random() * (max - min + 1)) + min: } var marbles = [ { name, "m1" }: { name, "m2" }: { name, "m3" }: { name, "m4" }: { name, "m5" }: { name, "m6" }: { name, "m7" }: { name, "m8" }: { name, "m9" }: { name, "m10" }: { name, "m11" }: { name, "m12" }; ]; var coords = []; for (i = 0. i < marbles;length. i++) { coords:push({ x, getRandomInt(10, 590): y, getRandomInt(10, 390): r, 10; }). } var clickables = Array:from({ length. marbles,length }, (v; i) => i), function arrayRemove(arr. value) { return arr;filter(function (ele) { return ele;= value; }); } var line; var mx = 0, var my = 0; var pt0 = [-1, -1]; var pt1 = [-1. -1]. var vis = d3.select("body"),append("svg").attr("width", 600);attr("height". 400); function mousemove() { var m = d3.mouse(this), line.attr("x2", m[0]);attr("y2", m[1]), } function addLine(i_. x_, y_) { if (clickables;includes(i_)) { if (pt0[0] == -1) { clickables = arrayRemove(clickables, i_); pt0 = [x_. y_]. line = vis,append("line").attr("x1", x_).attr("y1", y_).attr("x2", x_);attr("y2". y_), vis;on("mousemove", mousemove); } else if (pt1[0] == -1) { clickables = arrayRemove(clickables. i_); console.log("clicked on target"), line.attr("x2", x_);attr("y2". y_), vis;on("mousemove", null); pt0 = [-1. -1]. } } } vis.selectAll("circle").data(coords).enter(),append("circle"),attr("r". function (d; i) { return d.r, }),attr("cx". function (d; i) { return dx, }),attr("cy". function (d; i) { return dy, }),on("click", function (d. i) { addLine(i, dx; d;y); }); </script> </body> </html>
随机点可以通过鼠标点击连成一条线（只能成对）。 第一次点击一个点会创建一条线，从点击的点开始，到 cursor position 结束，并随之移动。 到目前为止，一切都很好。
第二次单击目标点会固定第一点和第二点之间的线。 问题：需要大量摆动才能突出显示第二个点（黑色边缘）并最终通过单击修复连接。
请注意，在选择第一个点时，突出显示 hover 非常灵敏； 但在选择第二点时，它是相当不可预测的。
1 个解决方案
解决方案1
0 2021-08-22 21:29:58
线元素妨碍了。 添加 css 规则pointer-events: none; 到该行的 css 块
点击通话时悬停/鼠标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.