2
我只是深入研究d3並學習了很多，但我確信我錯過了/誤解了一些基礎知識，並且會喜歡一些指導。d3.js基於鼠標移動的更新行
基本上，我想利用d3在mousedown事件（x1，y1）中繪製跟隨鼠標的線段，在mousemove事件觸發時更新（x2，y2）座標，最後完成/停止繪製該線一旦發生mouseup（確定（x2，y2）座標）。
看看這個的jsfiddle我設置來說明我想要做的事：http://jsfiddle.net/555Cv/
顯然，問題是該行沒有更新的鼠標移動。這可能是我完全錯誤的，所以任何形式的指導將不勝感激。謝謝！
UPDATE 我看到有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/