问在D3 js中通过给定的方向移动直线吗？

EN

var width = 600,
    height = 600,
    activeClassName = 'active-d3-item';

var svg = d3.select('.plane').append('svg');
svg.attr('width', width);
svg.attr('height', height);

//The data for our lines and endpoints
var data = [
    {
        'x1': 100,
        'y1': 300,
        'x2': 100,
        'y2': 50
    },
    {
        'x1': 100,
        'y1': 300,
        'x2': 300,
        'y2': 300
    },
    {
        'x1': 100,
        'y1': 300,
        'x2': 39,
        'y2': 239
    }
];

// Generating the svg lines attributes
var lineAttributes = {
    'x1': function(d) {
        return d.x1;
    },
    'y1': function(d) {
        return d.y1;
    },
    'x2': function(d) {
        return d.x2;
    },
    'y2': function(d) {
        return d.y2;
    }
};

// Pointer to the d3 lines
var lines = svg
    .selectAll('line')
    .data(data)
    .enter()
    .append('line')
    .attr(lineAttributes);

var topEndPoints = data.map(function(line, i) {
    return {
        'x': line.x1,
        'y': line.y1,
        'marker': 'marker-start',
        'lineIndex': i
    };
});

var bottomEndPoints = data.map(function(line, i) {
    return {
        'x': line.x2,
        'y': line.y2,
        'marker': 'marker-end',
        'lineIndex': i
    };
});

var endPointsData = bottomEndPoints;

// Generating the svg circle attributes
var endPointsAttributtes = {
    'r': 7,
    'cx': function(d) {
        return d.x;
    },
    'cy': function(d) {
        return d.y;
    }
};

var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on('dragstart', dragstarted)
    .on('drag', dragged)
    .on('dragend', dragended);

// Pointer to d3 circles
var endPoints = svg
    .selectAll('circle')
    .data(endPointsData)
    .enter()
    .append('circle')
    .attr(endPointsAttributtes)
    .call(drag);

function dragstarted() {
    d3.select(this).classed(activeClassName, true);
}

function dragged(d, i) {
    var marker = d3.select(this);

    // Update the marker properties
    if(d.lineIndex === 0) { 
        marker.attr('cy', d.y = d3.event.y); //Drag line 1 only through y axis.
    } else if(d.lineIndex === 1) {
        marker.attr('cx', d.x = d3.event.x); //Drag line 2 only through x axis.
    } else if(d.lineIndex === 2) {
            marker.attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
    }

    // Update the line properties
    lines
        .filter(function(lineData, lineIndex) {

            return lineIndex === d.lineIndex;
        }).attr('x1', function(lineData) {
             return d.marker === 'marker-start' ? lineData.x1 = d.x : lineData.x1;
         }).attr('y1', function(lineData) {
            return d.marker === 'marker-start' ? lineData.y1 = d.y : lineData.y1;
        })
        .attr('x2', function(lineData) {
            return d.marker === 'marker-end' ? lineData.x2 = d.x : lineData.x2;
        }).attr('y2', function(lineData) {
         return d.marker === 'marker-end' ? lineData.y2 = d.y : lineData.y2;
     });
}

function dragended() {
    d3.select(this).classed(activeClassName, false);
}