2
私はd3を掘り下げてたくさん学習していますが、私はここでいくつかの基本が間違っている/間違っていると確信しています。d3.jsはマウスの動きに基づいて行を更新します
基本的には、mousedownイベント（x1、y1）からマウスの後に続く線分を描くためにd3を使用して、mousemoveイベントの発生として座標を更新し、最後に描画を終了/停止したい一旦mouseupが点火する線（（x2、y2）座標を確定する）。
は私が何をしようとしている説明するためのセットアップをしたこのjsFiddleを見てみましょう：http://jsfiddle.net/555Cv/
明らかに問題はラインがマウスを移動すると、更新されていないということです。私はこれについて完全に間違っていると思われるので、どんな種類のガイダンスにも感謝します。ありがとう！私はd3.behavior.dragエクステンションがある見るが、私はそれが正確なものの種類だ場合、ユーザは、正確にどのオブジェクトと相互作用していないので、私は（必要かどうかだろうかわからない
UPDATE 、）オーケー
UPDATE 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/