javascript - d3 可拖动 svg 路径线段

Question

我的任务是使用 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));

Answer 1

好吧，我非常接近。这是我在 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)} ];