How Do I Add Another Line Dynamically?

I'm trying to create dynamic line that randomly moves on the page, I also want to move the tip of the line with mouse movement so I tried adding another data in 'linedata' variable

Solution 1:

You can create a line and move the line by changing the x1/y1/x2/y2 as per the mouse pointer. See the function mousemove

For generating random lines see function generateLines

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", mousemove);

functiongenerateLines() {
    var line = svg.append("line")
        .attr("stroke", "orange")
        .attr("stroke-width", 7)
        .attr("class", "line")
        .attr("x1", generateRandomPoints())
        .attr("y1", generateRandomPoints())
        .attr("x2", generateRandomPoints())
        .attr("y2", generateRandomPoints())
        .attr("fill", "none");
}


functionmousemove() {
    var t = d3.mouse(this);

    svg.selectAll(".line").attr("x1", t[0]).attr("y1", t[1]);
}
//make random pointsfunctiongenerateRandomPoints() {
    returnparseInt(Math.random() * 500);
}
//this will generate random lines after an interval of 3 secssetInterval(function () {
    generateLines();
}, 3000);

full working code here

Hope this helps!