我的任务是使用d3在mousedown上绘制svg形状。我一直在尝试弄清楚如何使其可拖动。我将svg排成一行(请参阅here),但实际上我需要使用路径来代替。我已经很近了,但是我很困惑。有人可以帮我吗?这是一些代码,this是我的 fiddle 。
var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
isDown = false;
m3 = d3.mouse(this);
var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
{x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ];
line.attr('d', lineFunction(newArray));
}
按下鼠标
pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
line = svg.append('path')
.attr('d', lineFunction(pathArray))
.attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
.call(drag);
鼠标移动
m2 = d3.mouse(this);
pathArray[1] = {'x': m2[0], 'y': m2[1]};
line.attr('d', lineFunction(pathArray));
最佳答案
好吧,我 super 亲密。这就是我在dragmove中所做的更改。现在效果很好。
var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
{x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ];
关于javascript - d3可拖动svg路径线段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24375231/