如何在d3.js中的svg中拖放一组矩形？

我基于这个拖放示例工作：

我想拖一组。 我将两个矩形放在单个组中，现在想要拖放整个组，在我的代码中拖放工作在单个矩形上但不在组上。

这是我的代码：

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

Answer 1

SVG 组元素中没有x或y属性。 要定位它们，您必须使用transform ：

 d3.select(this).attr("transform", "translate(" + x + "," + y + ")") //the x and y positions here --------------------^ -------^ 

除此之外， 元素只是容器。 例如，在下面的演示中（使用transform来定位组，如前所述），您必须单击其中一个矩形来拖动整个组：单击它们之间的空格无效。

 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) + ")") }))