Làm thế nào để kéo một nhóm svg bằng cách sử dụng hành vi kéo d3.js?

Question

Tôi đang sử dụng D3js drag. yếu tố duy nhất được kéo hoàn toàn tốt đẹp. nhưng tôi muốn kéo một nhóm các phần tử. Làm thế nào nó có thể được thực hiện. Đây là nội dung của tôi trên số Js Fiddle link:

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); 
    } 

Tôi muốn kéo cả văn bản và văn bản đồng thời. Đây là những gì tôi tried, nhưng không có may mắn. Tôi nghĩ rằng thiếu một cái gì đó đơn giản.

Answer 1

Trước hết, phần tử < g> không quan tâm đến các thuộc tính x và y (như trong: chúng chỉ bị bỏ qua). Thay vào đó, bạn có thể sử dụng transform="translate(x,y)".

Thứ hai, bạn sẽ cần phải kiểm tra xem phần tử bạn có trong trình xử lý kéo thực sự là phần tử < g> chứ không phải phần tử con của nó. Điều này là do các phần tử < g> không có vùng truy cập thực tế nào. Con cái của họ mặc dù, và các sự kiện chuột đầu tiên đi đến trẻ em sau đó bong bóng lên đến cha mẹ. Bạn có thể kiểm tra evt.target và evt.currentTarget để xem điều này hoạt động. target là phần tử đã được truy cập ban đầu, currentTarget là mục tiêu sự kiện hiện đang xử lý sự kiện (ví dụ: < g> yếu tố nếu sự kiện được phát triển).

Answer 2

Đối với 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); 

này giả định rằng bạn có dữ liệu bị ràng buộc vào nhóm.