通過鼠標單擊連接點 - 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.