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

10-09 18:10
查看更多