I've created a line in d3, which I want to drag around.

var line = d3.select("svg")
              .append("line")
              .attr("x1",10)
              .attr("y1",10)
              .attr("x2",200)
              .attr("y2",200)
              .attr("stroke-width",10)
              .attr("stroke","black")
              .call(drag);

The problem I have right now, is how to move both Points (x1,y1) (x2,y2) from the line relative to my mouse position, as I probably will need the dragstart mouse position as well.

let drag = d3.behavior.drag()
           .on('dragstart', null)
           .on('drag', function(){
             // move circle
             let x1New = d3.select(this).attr('x1')+ ???;
             let y1New = d3.select(this).attr('y1')+ ???;
             let x2New = d3.select(this).attr('x2')+ ???;
             let y2New = d3.select(this).attr('y2')+ ???;
             line.attr("x1",x1New)
                 .attr("y1",y1New)
                 .attr("x2",x2New)
                 .attr("y2",y2New);
             })
           .on('dragend', function(){
           }); 

I hope you can help me with that.

I've created a line in d3, which I want to drag around.

var line = d3.select("svg")
              .append("line")
              .attr("x1",10)
              .attr("y1",10)
              .attr("x2",200)
              .attr("y2",200)
              .attr("stroke-width",10)
              .attr("stroke","black")
              .call(drag);

The problem I have right now, is how to move both Points (x1,y1) (x2,y2) from the line relative to my mouse position, as I probably will need the dragstart mouse position as well.

let drag = d3.behavior.drag()
           .on('dragstart', null)
           .on('drag', function(){
             // move circle
             let x1New = d3.select(this).attr('x1')+ ???;
             let y1New = d3.select(this).attr('y1')+ ???;
             let x2New = d3.select(this).attr('x2')+ ???;
             let y2New = d3.select(this).attr('y2')+ ???;
             line.attr("x1",x1New)
                 .attr("y1",y1New)
                 .attr("x2",x2New)
                 .attr("y2",y2New);
             })
           .on('dragend', function(){
           }); 

I hope you can help me with that.

• javascript
• d3.js
• line
• drag

1 Answer 1

Do it like this inside your drag function:

.on('drag', function(d){
             // move circle
             var dx = d3.event.dx;//this will give the delta x moved by drag
             var dy = d3.event.dy;//this will give the delta y moved by drag
             var x1New = parseFloat(d3.select(this).attr('x1'))+ dx;
             var y1New = parseFloat(d3.select(this).attr('y1'))+ dy;
             var x2New = parseFloat(d3.select(this).attr('x2'))+ dx;
             var y2New = parseFloat(d3.select(this).attr('y2'))+ dy;
             line.attr("x1",x1New)
                 .attr("y1",y1New)
                 .attr("x2",x2New)
                 .attr("y2",y2New);
             }).on('dragend', function(){
           }); 

working code here