Using d3.drag() to enable dragging on an SVG group I'm using the following function to enable dragging on an SVG group.

var dragcontainer = d3.drag()
                        .on("start", function () { })
                        .on("drag", function (d, i) {

                            this.x = this.x || 0;
                            this.y = this.y || 0;

                            this.x += d3.event.dx;
                            this.y += d3.event.dy;
                            d3.select(this).attr("transform", "translate(" + this.x + "," + this.y + ")");

                        })
                        .on("end", function () {});

d3.select("#svg-group-id").call(dragcontainer);


Is there a better (simpler) way to achieve this than manually updating the translate destination?
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;