Using d3.drag() to enable dragging on an SVG group
Yes, there is a simpler way to achieve this: just use d3.event.x and d3.event.y, holding their values in the bound data.

Thus, your drag function can be reduced to only this:

var dragcontainer = d3.drag()
    .on("drag", function(d, i) {
        d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + ","
        + (d.y = d3.event.y) + ")");
    })


And, since you don't use them, just drop your "start" and "end" listeners.

Here is the demo (click and drag the group around):



var dragcontainer = d3.drag()
  .on("drag", function(d, i) {
    d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");
  });
var g = d3.select("g").datum({x: 0, y: 0}).call(dragcontainer)
&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
&lt;svg style="border: 1px solid gray"&gt;
  &lt;g&gt;
    &lt;circle cx="50" cy="50" r="20" fill="teal"&gt;&lt;/circle&gt;
    &lt;circle cx="100" cy="50" r="20" fill="tomato"&gt;&lt;/circle&gt;
    &lt;circle cx="150" cy="50" r="20" fill="tan"&gt;&lt;/circle&gt;
  &lt;/g&gt;
&lt;/svg&gt;