score:21

Accepted answer

You simply need to set the origin() function accordingly. In the second case this is straightforward, in the first case somewhat more difficult because you are using coordinates as well as a transform. The basic pattern (for the second case) looks like this:

 .origin(function() { 
        var t = d3.select(this);
        return {x: t.attr("x"), y: t.attr("y")};
    })

Updated jsfiddle here.

score:0

group element has no x/y attributes - no problem! create ones:

var node = svg.append("g")
            .attr('x',x_1)
            .attr('y',y_1)
            .attr("class","node")
            .attr("name","Node_A")
            .attr("transform","translate(" + x_1 + ", " + y_1 +")")
            .call(drag);

when, the .origin function from Lars will work

and dont forget to update x,y attributes, while dragging:

function dragged() {

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

Related Query

More Query from same tag