Какой самый простой способ подключить элемент d3 к мыши?

Question

Я просмотрел несколько вопросов d3 drag и examples, но мне не удалось найти способ надолго прикрепить элемент к мыши.

Например, предположим, что я делаю несколько строк в d3:

var height = $(document).height() - 20; 
var width = $(document).width() - 20; 
var svgSelection = 
    d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 
var lines = 100; 

for (var i = 0; i < lines; i++){ 
    var myLine = svgSelection 
     .append("line") 
     .attr("x1", Math.random() * width) 
     .attr("y1", Math.random() * height) 
     .attr("x2", width/2) 
     .attr("y2", height/2) 
     .style("stroke", "black") 
     .style("stroke-width", 5) 
     .style("visiblity", "visible"); 
} 

Как бы сделать так, чтобы "x1" и "y1".attr s привязаны к местоположению мыши на неопределенное время? Это означало бы, что я мог бы перемещать "x2" и "y2".attr s в любое время, сохраняя при этом другие концы линий, прикрепленных к мыши. Есть простой способ сделать это?

(Это было бы просто в любом старом <svg> блоке, конечно.)

Answer 1

Способ сделать это, чтобы присоединить обработчик мыши для всей SVG и в функции обработчика получить позицию мыши и обновления координаты, которые вы хотите. Вы можете видеть, что я говорю о here (щелкните по узлу и двигайте мышь, удерживая нажатой кнопку).