CODEWITHSUNDEEP
javascriptjqueryd3.jssvgdrag-and-drop
V.Kumpavat
V.Kumpavat

Reputation: 41

How to drag and drop a group of rectangles in svg in d3.js?

I worked based on this drag and drop example :

I want to drag a group. I placed both rectangles in single group and now want to drag and drop whole group, in my code drag and drop works on single rectangle but not on group.

and here is my code :

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

Upvotes: 3

Views: 2642

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

There is no x or y property in SVG group elements. To position them, you have to use transform:

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

Besides that, <g> elements are only containers. In the following demo (using transform to position the group, as already explained), for instance, you have to click in one of the rectangles to drag the whole group: clicking in the space between them has no effect.

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>

Upvotes: 5

Related Questions