如何使用d3.js拖動行爲來拖動svg組？

我正在使用D3js drag。單個元素被完全拖拽得很好。但我想拖動一組元素。它可以做到。下面是在我的Js Fiddle link：如何使用d3.js拖動行爲來拖動svg組？

function onDragDrop(dragHandler, dropHandler) { 
     var drag = d3.behavior.drag(); 

    drag.on("drag", dragHandler) 
    .on("dragend", dropHandler); 
    return drag; 
    } 

    var g = d3.select("body").select("svg").append("g") 
    .data([{ x: 50, y: 50 }]); 

    g.append("rect") 
    .attr("width", 40) 
    .attr("height", 40) 
    .attr("stroke", "red") 
    .attr("fill","transparent") 
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 
    .call(onDragDrop(dragmove, dropHandler)); 

    g.append("text") 
    .text("Any Text") 
    .attr("x", function (d) { return d.x; }) 
    .attr("y", function (d) { return d.y; }) 
    .call(onDragDrop(dragmove, dropHandler)); 

    function dropHandler(d) { 
     // alert('dropped'); 
    } 

    function dragmove(d) { 
     d3.select(this) 
     .attr("x", d.x = d3.event.x) 
     .attr("y", d.y = d3.event.y); 
    }

我想要同時拖動矩形都和文字。這是我的tried，但沒有運氣。我想我錯過了一些簡單的事情。

來源

2013-04-11 Sudarshan

你應該在這裏添加你的代碼，而不只是鏈接到jsfiddle。 – 2013-04-11 11:55:34

首先，< g>元素不關心x和y屬性（如：它們只是被忽略）。您可以改用transform="translate(x,y)"。

其次，您需要檢查您在dragmove處理程序中獲取的元素實際上是否爲g>元素，而不是它的子元素。這是因爲< g>元素本身沒有實際的擊中區域。然而，他們的孩子會這樣做，而鼠標事件首先會發送給孩子，然後冒泡給父母。您可以檢查evt.target和evt.currentTarget以查看此操作。 target是最初被擊中的元素，currentTarget是當前正在處理事件的事件目標（例如，如果事件冒泡起來，則爲< g>元素）。

來源

2013-04-11 08:24:24

我試過你的方法。但元素在拖動它們時閃爍。看看這裏。 http://jsfiddle.net/xnjGD/3/ – Sudarshan 2013-04-11 09:18:10

這是因爲你沒有調用元素的拖動。這裏有一個簡單的修復：http://jsfiddle.net/xnjGD/4/。另請參閱http://stackoverflow.com/questions/13078535/stuttering-drag-when-using-d3-behavior-drag-and-transform。 – 2013-04-11 11:54:44

謝謝Erik。你第二次救了我，感謝了很多。這是我的問題的最終解決方案。 http://jsfiddle.net/xnjGD/6/ – Sudarshan 2013-04-11 12:26:09

對於D3 V4：

var drag_this = d3.drag().subject(this) 
    .on('start',function (d) { 
     if (d.x1){ 
      d.x1 = d3.event.x - d.xt; 
      d.y1 = d3.event.y - d.yt; 
     }else{ 
      d.x1 = d3.event.x; 
      d.y1 = d3.event.y; 
     } 
    }) 
    .on('drag',function(d){ 
     d3.select(this) 
     .attr("transform", "translate(" + (d3.event.x - d.x1) + "," + (d3.event.y - d.y1) + ")"); 

     d.xt = d3.event.x - d.x1; 
     d.yt = d3.event.y - d.y1; 
    }); 

my_group.call(drag_this);

這是假設你有一個綁定於一組數據。

來源

2016-11-13 23:33:28 v4gil

如何使用d3.js拖動行爲來拖動svg組？

回答

相關問題