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

【问题标题】：How to drag and drop a group of rectangles in svg in d3.js?如何在d3.js中拖放svg中的一组矩形？
【发布时间】：2017-03-25 23:44:44
【问题描述】：

我基于this拖放示例工作：

我想拖动一个组。我将两个矩形放在一个组中，现在想要拖放整个组，在我的代码中拖放适用于单个矩形而不是组。

这是我的代码：

   <!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>

【问题讨论】：

您应该在 group 元素上使用 transform 而不是设置 x, y 属性。

标签： javascript jquery d3.js svg drag-and-drop

【解决方案1】：

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

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

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

var g = d3.select("g")
  .datum({
    x: 0,
    y: 0
  })
  .call(d3.drag()
    .on("drag", function(d) {
      d3.select(this).attr("transform", "translate(" + 
      (d.x = d3.event.x) + "," + (d.y = 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>

【讨论】：

@Gerardo 如果我想将这些矩形保留在 SVG 边界内怎么办？
@NullPointer 我看到你的问题已经有了答案。
是的。谢谢
@GerardoFurtado 我还有一个问题，你能帮我解决一下吗？