The default subject is the datum of the element in the originating selection (see drag) that received the initiating input event. When dragging circle elements in SVG, the default subject is the datum of the circle being dragged…

And:

If the subject is null or undefined, no drag gesture is started for this pointer; however, other starting touches may yet start drag gestures.

In your failing example, the datum of your circle is undefined, so it can’t initiate a drag gesture. Giving the circle a non-null datum, such as 1, fixes it.

Yet even your non-failing example isn’t ideal because the drag gesture can’t infer the x- and y-coordinates of the circle, and so when you start a drag gesture, the circle center will jump to the mouse (or touch) position, rather than maintaining the relative position of the circle and pointer. A better way of creating a single, draggable circle would be:

It’s possible we should change the default subject to be something else if the element’s datum is undefined… such as the element itself. That would make the drag behavior work as you expect, although the above code is a better solution in my opinion.

Email codedump link for Attaching drag behaviour without using data().enter() in D3 v4