使用d3.js将客户端折线输入限制为仅水平和垂直线

Question

我想使用http://jsfiddle.net/eZQdE/395/作为我的项目的基础，在该项目中，必须限制客户端只能绘制直线（具有对齐网格功能）。

我设法解决了mousemove事件中的图形部分，但是客户端仍然能够在mouseup事件中绘制斜线：

svg.on('mouseup', function(){
    if(dragging) return;
    drawing = true;
    startPoint = [d3.mouse(this)[0], d3.mouse(this)[1]];

    if(svg.select('g.drawPoly').empty()) g = svg.append('g').attr('class', 'drawPoly');

    if(d3.event.target.hasAttribute('is-handle')) {
        closePolygon();
        return;
    };

    if(Math.abs(d3.mouse(this)[0] - startPoint[0]) > Math.abs(d3.mouse(this)[1] - startPoint[1])){
        points.push(d3.mouse(this)[0], startPoint[1]);
    }else{
        points.push([startPoint[0], d3.mouse(this)[1]]);
    }

    g.select('polyline').remove();
    var polyline = g.append('polyline').attr('points', points)
                    .style('fill', 'none')
                    .attr('stroke', '#000');
    for(var i = 0; i < points.length; i++) {
        g.append('circle')
         .attr('cx', points[i][0])
         .attr('cy', points[i][1])
         .attr('r', 4)
         .attr('fill', 'yellow')
         .attr('stroke', '#000')
         .attr('is-handle', 'true')
         .style({cursor: 'pointer'});
    }
});

d3.js中有什么魔术可以解决这个问题？