Question

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

基本上，我想利用d3在mousedown事件（x1，y1）之后绘制一条跟随鼠标的线段，将（x2，y2）坐标更新为mousemove事件一旦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/

Answer 1

好的，我想我已经解决了，请参阅jsFiddle：http://jsfiddle.net/555Cv/2/

但肯定必须有更优雅/正确的方法来做到这一点......

d3.js根据鼠标移动更新行

1 个答案: