D3.js: Dragging Everything In Group ('g') By Element Contained In The Group Using Origin() Function

I am not sure what's going on, but I have 2 very simple examples set up to show what I am asking. Both examples have a 'g' that contains a 'rect' and 'text'. In the 1st example, I

Solution 1:

I'm not sure exactly why it is flickering (as I am not too familiar with D3), but one way to get it to stop is to use the source event for D3:

// 50 is the offset x/y position you set for your textvar x = d3.event.sourceEvent.pageX - 50;
var y = d3.event.sourceEvent.pageY - 50;

Edit: While the above code works, it causes the box to initially "jump" to the coordinates of the text, A better fix would be to take your first example and just filter our events that aren't executed on the text element. Try putting the following at the top of the dragMove method:

if(d3.event.sourceEvent.target.nodeName !== 'text') {
    return;
}

Solution 2:

Try d3.event.sourceEvent.stopPropagation(); inside on-drag function