'Connecting points by mouse click - flickering behavior on hover

This code works but has an issue:

<!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 d.x;
        })
        .attr("cy", function (d, i) {
          return d.y;
        })
        .on("click", function (d, i) {
          addLine(i, d.x, d.y);
        });
    </script>
  </body>
</html>

Random points can be connected with a line through mouse clicks (only in pairs). A first click on a point creates a line that starts at the clicked point and ends at the cursor position, moving around with it. So far so good.

A second click on a target point fixes the line between first and second point. Problem: a lot of wiggling is required to get the second point highlighted (black rim) and finally fix the connection with a click.

Note that when choosing the first point, highlight on hover is quite responsive; but it's rather unpredictable when choosing the second point.

Solution 1:^[1]

the line element is getting in the way. add the css rule pointer-events: none; to the line's css block

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jeff Mett

'Connecting points by mouse click - flickering behavior on hover

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]