xxxxxxxxxx<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Update End Point on Mousemove</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="d3-drawing-area"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script> <script> var svg = d3.select('#d3-drawing-area').append('svg') .attr('width', 300) .attr('height', 300) .style('background', 'lightblue'); var line = svg.append('line') .attr('x1', 100) .attr('y1', 100) .attr('x2', 200) .attr('y2', 200) .style('stroke', 'blue') .style('stroke-width', 2); // update endpoint on mousemove over svg svg.on('mousemove', function() { // get mouse position relative to "this" svg var mousePosition = d3.mouse(this); // use it to update endpoint (x2, y2) line .attr('x2', mousePosition[0]) .attr('y2', mousePosition[1]); }); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js