D3.js基于鼠标移动的更新行

我只是深入研究 d3 并学到了很多东西，但我确定我在这里缺少/误解了一些基础知识，并希望得到一些指导。

基本上，我想利用 d3 绘制一条线段，该线段跟随鼠标从 mousedown 事件 (x1， y1( 在mousemove事件触发时更新 (x2， y2( 坐标，最后在mouseup触发后完成/停止绘制线条(最终确定 (x2， y2( 坐标(。

看看我设置的这个jsFiddle来说明我正在尝试做什么：http://jsfiddle.net/555Cv/

显然，问题是该行不会随着鼠标移动而更新。很可能我完全错了，所以任何形式的指导将不胜感激。谢谢！

更新我看到有 d3.behavior.drag 扩展，但我不确定这是否正是我需要的东西类型(因为用户并没有完全与任何对象交互，而是动态创建一个新对象(行对象((

更新 2好吧，我在这里尝试以不同的方式进行，我认为它几乎就在那里。虽然我确信有更好的方法可以做到这一点。下面的内容很接近(但它没有画出界限(。

    var shapeCoords = [
              [10, 10], [200, 10], [200, 200], [10, 200], [5, 100]
              ];
$(function() {
var container = $('#container');
// D3
console.log("D3: ", d3);
// Draw Shape
var svg = d3.select('#container').append('svg:svg').attr('height', 600).attr('width', 800);

var line = d3.svg.line()
                .x(function(d) { return d[0]; })
                .y(function(d) { return d[1]; })
                .interpolate('linear');
svg
    .data(shapeCoords)
    .append('svg:path')
    .attr('d', line(shapeCoords) + 'Z')
    .style('stroke-width', 1)
    .style('stroke', 'steelblue')
    .style('fill', 'rgba(120, 220, 54, 0.2)');

// Draw Lines
var lineData = [];
var line = d3.svg.line()
                .x(function(d) { return d.x; })
                .y(function(d) { return d.y; })
                .interpolate("linear");
var redrawLine = function() {
    var svgLines = svg.selectAll('path')
                        .data(lineData);

    svgLines.enter()
            .append('path')
            .attr('d', line(lineData))
            .attr('class', 'my-lines');
    svgLines.exit()
            .remove();
    console.debug("lineData", lineData);
};
var mouseIsDown = false;  
container.on('mousedown mouseup mousemove', function(e) {
    if (e.type == 'mousedown') {
        mouseIsDown = true; 
        lineData[0] = {x:e.offsetX, y:e.offsetY};
        redrawLine();
    } else if (e.type == 'mouseup' ){
        mouseIsDown = false;
        lineData[1] = {x:e.offsetX, y:e.offsetY};
        redrawLine();
    } else if (e.type == 'mousemove') {
        if (mouseIsDown) {
            lineData[1] = {x:e.offsetX, y:e.offsetY};
            redrawLine();    
        }
    }
});

});

我在这里更新了jsFiddle：http://jsfiddle.net/555Cv/1/