2

我只是深入研究 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/

4

1 回答 1

1

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

但肯定有一种更优雅/更合适的方式来做到这一点......

于 2012-05-08T22:01:05.290 回答