在拖动时重绘/缩放一条线

Question

单击并使用箭头标记拖动时，如何重绘或缩放线？

function createLine(x, y)
{
    var lineData = [{"x": 0, "y": 0}, {"x": 50, "y": 0}];

    // define arrow marker
    svg.append("svg:defs").selectAll("marker")
            .data(["arrow"])
            .enter().append("svg:marker")
            .attr("id", String)
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 10)
            .attr("refY", 0)
            .attr("markerWidth", 6.5)
            .attr("markerHeight", 6.5)
            .attr("orient", "auto")
            .append("svg:path")
            .attr("d", "M3,-4 L11,0 L3,4");

    var lineFunction = d3.svg.line()
            .x(function (d) {
                return d.x;
            })
            .y(function (d) {
                return d.y;
            })
            .interpolate("linear");

    var line = svg.append('g').append("path")
            .attr("d", lineFunction(lineData))
            .attr("id", "myPath")
            .attr("class", "link_arrow")
            .attr("marker-start", "url(#arrow)")
            .attr("marker-end", "url(#arrow)")
            .attr("transform", "translate(" + x + "," + y + ")")
            .attr("stroke", "black")
            .attr("stroke-width", 2)
            .attr("fill", "none")
            .style('cursor', 'move')
            .call(drag);
    line.on('mousedown',mousemove);

这就是我正在尝试的，显然无效。

function mousemove() {
        var m = d3.mouse(this);
        line.attr("x2", m[0])
                .attr("y2", m[1]);
    }
}

如何在标记的两端拖动时缩放线条？