在d3中拖动一条线

Question

我在d3中创建了一条线，我想要拖动它。

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); 

我现在的问题是如何在这两个点（X1，Y1）（X2，Y2）相对于我的鼠标位置的行动，因为我可能需要在dragstart鼠标位置以及。

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(){ 
      }); 

我希望你能帮助我。

Answer 1

做这样你拖函数中：

.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(){ 
      }); 

工作代码here