2

私はd3を掘り下げて多くのことを学んでいますが、ここでいくつかの基本事項が欠けている/誤解していると確信しており、いくつかのガイダンスが大好きです.

基本的に、イベント (x1, y1) からマウスに続く線分を描画するために d3 を利用したいと思います。イベントが発生するとmousedown(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 に答える