dragging a group

by parksd

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
    body {
      background: url(images/bg.jpg) repeat;
    }
    
    svg {
      margin: 0 auto;
      display: block;
    }
    
    .link {
      stroke: #51565b;
      stroke-width: 20;
      stroke-opacity: 1;
    }
  </style>
  <script>
    var width = 800,
      height = 600

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var force = d3.layout.force()
      .gravity(1)
      .linkDistance(function(d) {
        return d.distance;
      })
      .charge(-40000)
      .size([width, height]);

    var datajson = {
      "nodes": [{
        "name": "a",
        "node_id": "10",
        "group": 2,
        "node_img": "http://loremflickr.com/320/240/dog",
        "drag_radius": 150
      }, {
        "name": "b",
        "group": 1,
        "node_id": "11",
        "node_img": "http://loremflickr.com/320/240/dog",
        "drag_radius": 200
      }, {
        "name": "c",
        "group": 1,
        "node_id": "12",
        "node_img": "http://loremflickr.com/320/240/dog",
        "drag_radius": 100
      }],
      "links": [{
        "source": 0,
        "target": 1,
        "value": 1,
        "distance": 400
      }, {
        "source": 1,
        "target": 2,
        "value": 2,
        "distance": 300
      }, {
        "source": 2,
        "target": 0,
        "value": 3,
        "distance": 300
      }]
    }

    var numNodes = datajson.nodes.length
    var r = 20;
    datajson.nodes.forEach(function(node, i) {
      node.x = width / 2 + r * Math.sin(2 * Math.PI * i / numNodes)
      node.y = height / 2 + r * Math.cos(2 * Math.PI * i / numNodes)
    })

    force
      .nodes(datajson.nodes)
      .links(datajson.links)
     ...

JavaScript

var in_editor_drag = d3.behavior.drag()
             .origin(function() {
                var g = this.parentNode;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d,i) {
                
                g = this.parentNode;
                console.log(g);
                translate = d3.transform(g.getAttribute("transform")).translate;
                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];
                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();
            });

svg = d3.select("svg");
d = {x: 20, y: 20 };
group = svg
        .append("g")

        .attr("transform", "translate(20, 20)");

group
    .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .style("fill", "green")

        .style("opacity", 0.4);

handle = group
    .append("rect")
        .attr("x", 0)
        .attr("y", 80)
        .attr("width", 100)
        .attr("height", 20)
        .style("fill", "blue")     
        .style("opacity", 0.4);

group
    .append("text")
    .attr("x", 10)
    .attr("y", 95)  
    .text("drag me")
    .call(in_editor_drag);