無法拖入d3

Question

我有以下D3代碼，但無法成功拖動rect元素。 （請忽略錯誤的縮進），我無法理解我在做什么錯。

var svg = d3.select('#slider').append('svg')
    .attr('width', width)
    .attr('height', height);


var drag = d3.behavior.drag()
    .origin(function (d) {
        return d;
    })
    .on("dragstart", dragstarted)
    .on("drag", dragged);

//Called when drag event starts. It stop the propagation of the click event
function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
}

//Called when the drag event occurs (object should be moved)
function dragged(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    //Translate the object on the actual moved point
    d3.select(this).attr({
        transform: "translate(" + d.x + "," + d.y + ")"
    });
};

svg.append('rect')
    .attr('width', 500)
    .attr('height', 250)
    .attr('x', 10)
    .attr('y', 50)
    .attr('fill', "transparent")
    .attr('stroke', "orange")
    .attr('stroke-width', 2)
    .append("title")
    .text(function (d) {
        return "Zone 1";
    })
    .call(drag);

Answer 1

有一些問題：

1. 您沒有將任何數據綁定到<rect> 。 當嘗試通過參數d引用該數據時， .origin()和.on()回調將失敗。 您可以使用<rect>的配置設置一個對象，該對象可以在您的整個代碼中使用。

    // Configuration for rect var rect = { x: 50, y: 50, w: 500, h: 250, t: "Zone 1" }; svg.selectAll("rect") .data([rect]) // bind your config to the rect to be appended .enter().append('rect') .attr('width', function(d) { return dw; }) .attr('height', function(d) { return dh; }) 

   這樣，它綁定到了<rect> ，因此即使在拖動處理程序中也可以訪問它。 這是D3.js中非常常見的模式。

2. 將<title>元素附加到<rect> ，您將調用.drag() ，這會將拖動行為添加到標題而不是<rect> 。 要將拖動添加到<rect>您必須將其向上移動到調用鏈中。

    svg.selectAll("rect").data([rect]).enter().append('rect') // ... .call(drag) .append("title") .text(function(d){return dt;}); 

3. 要定位你的<rect>您正在使用）及其屬性的組合x和y當設置和b）轉換translate在處理拖動的偏移。 混合這兩種方法通常會搞砸。 您應該選擇其中一種方法，然后始終堅持下去。

我已經建立了一個工作片段，並提供了更多注釋來解釋更改。

 var width = 10000, height = 10000; var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); var drag = d3.behavior.drag() .origin(function(d) { return d; }) // this will access the bound config accessing its x and y .on("dragstart", dragstarted) .on("drag", dragged); //Called when drag event starts. It stop the propagation of the click event function dragstarted(d) { d3.event.sourceEvent.stopPropagation(); } //Called when the drag event occurs (object should be moved) function dragged(d) { dx = d3.event.x; // update x of the config object dy = d3.event.y; // update y of the config object // Set new x and y on drag d3.select(this).attr({ "x": dx, "y": dy }); }; // Configuration for rect var rect = { x: 50, y: 50, w: 500, h: 250, t: "Zone 1" }; svg.selectAll("rect") .data([rect]) .enter().append('rect') .attr('width', function(d) { return dw; }) .attr('height', function(d) { return dh; }) .attr('x', function(d) { return dx; }) .attr('y', function(d) { return dy; }) .attr('fill', "transparent") .attr('stroke', "orange") .attr('stroke-width', 2) .call(drag) // call this before the title is appended .append("title") .text(function(d) { return dt; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>