0

I looked at some d3 drag questions and examples, but I haven't been able to find a way to permanently attach an element to the mouse.

For example, let's say I make some lines in 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");
}

How would I make it so the "x1" and "y1" .attrs are attached to the mouse location indefinitely? This would mean I could move the "x2" and "y2" .attrs at any time while keeping the other ends of the lines attached to the mouse. Is there an easy way to do this?

(This would just be in any old <svg> block, of course.)

Community
  • 1
  • 1
royhowie
  • 11,075
  • 14
  • 50
  • 67
  • i suspect that you are going to need to change your data and tell d3 that it has been updated, on mousemove events: `$('#canvas').on('mousemove', updateLineData)` – Plato Dec 12 '13 at 04:17

1 Answers1

0

The way to do this is to attach a mouse handler to your entire SVG and in the handler function get the mouse position and update the coordinates you want. You can see what I'm talking about here (click on a node and move the mouse while holding the click).

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204