Accepted answer

Your g element is already positioned (but see below for correct attribute) and handles dragging. Remove calls to d3.drag from the circle and text elements, also remove the cx and cy attributes from the text element.

Add pointer-events: all; to the .node CSS class. That allows the g element to handle all mouse events.

To correctly position the g elements use transform instead of cx and cy (which only apply to the circle element:

.attr("transform", function (d) { var r = z(d.bubbleSize); return "translate(" + (x(d.Interest) - r) + "," + (y(d.Influence) - r) + ")"; } )

The d3 gallery is always a great source of inspiration.

Related Query