Connecting points by mouse click – flickering behavior on hover

This code works but has an issue: https://jsfiddle.net/pmeran/e4zaj57q/2/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> … Read more Connecting points by mouse click – flickering behavior on hover

This code works but has an issue:

https://jsfiddle.net/pmeran/e4zaj57q/2/

<!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.

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *