Javascript 在d3中拖动一条线
我在d3中创建了一条线,我想把它拖过来Javascript 在d3中拖动一条线,javascript,d3.js,line,drag,Javascript,D3.js,Line,Drag,我在d3中创建了一条线,我想把它拖过来 var line = d3.select("svg") .append("line") .attr("x1",10) .attr("y1",10) .attr("x2",200) .attr("y2",200) .attr("stroke-width",10) .
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(){
});
我希望你能帮我做这件事。在拖动功能中这样做:
.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(){
});
工作代码这在
d3
版本4
及更高版本中不起作用