user3701098 - 1 year ago 122

Javascript Question

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.

Answer Source

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