Trabajé en base a este ejemplo de arrastrar y soltar:
Quiero arrastrar un grupo. Coloqué ambos rectángulos en un solo grupo y ahora quiero arrastrar y soltar todo el grupo, en mi código, arrastrar y soltar funciona en un solo rectángulo pero no en el grupo.
y aquí está mi código:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> </script> <title>Drag And Drop</title> </head> <body> <div id="viz"></div> <script type="text/javascript"> var vizSVG = d3.select("#viz") .append("svg") .attr("width", 400) .attr("height", 300); var group =d3.select("svg") .append("g") .attr("id","group1") .attr("x",50) .attr("y", 140) //.attr("fill", "yellow") // .call(d3.behavior.drag().on("drag", move)); group.append("rect") .attr("id", "bluerect") .attr("x", 50) .attr("y", 140) .attr("width", 50) .attr("height", 50) .attr("stroke", "red") .attr("fill", "blue") .attr("opacity","0.5") .call(d3.behavior.drag().on("drag", move)); group.append("rect") .attr("id", "redrect") .attr("x", 110) .attr("y", 140) .attr("width", 50) .attr("height", 50) .attr("stroke", "blue") .attr("fill", "red") .call(d3.behavior.drag().on("drag", move)); function move(){ this.parentNode.appendChild(this); var dragTarget = d3.select(this); dragTarget .attr("x", function(){;return d3.event.dx + parseInt(dragTarget.attr("x"))}) .attr("y", function(){return d3.event.dy + parseInt(dragTarget.attr("y"))}); }; </script> </body> </html>No existe la propiedad x o y en los elementos del grupo SVG. Para posicionarlos, tienes que usar transform :
d3.select(this).attr("transform", "translate(" + x + "," + y + ")") //the x and y positions here --------------------^ -------^ Además de eso, los elementos <g> son solo contenedores. En la siguiente demostración (usando transform para posicionar el grupo, como ya se explicó), por ejemplo, debe hacer clic en uno de los rectángulos para arrastrar todo el grupo: hacer clic en el espacio entre ellos no tiene ningún efecto.
var g = d3.select("g") .datum({ x: 0, y: 0 }) .call(d3.drag() .on("drag", function(d) { d3.select(this).attr("transform", "translate(" + (dx = d3.event.x) + "," + (dy = d3.event.y) + ")") })) <script src="https://d3js.org/d3.v4.min.js"></script> <svg> <g> <rect x="40" y="10" width="50" height="20" fill="teal"></rect> <rect x="60" y="40" width="50" height="20" fill="teal"></rect> <rect x="30" y="35" width="20" height="20" fill="teal"></rect> </g> </svg>