[Solved]-D3: Using a closure to update a selection without re-binding data-d3.js

In this example there is no update to the data that would require a re-bind. In fact, there is only one single datum which gets modified during the drag gesture. When the drag actually starts, the subject as specified by

.subject(function() { var p = [d3.event.x, d3.event.y]; return [p, p]; })

is captured and stored in variable d:

var d = d3.event.subject,

As can be seen from the above two lines, this will start off as an array containing two coordinate pairs defining the start and end points of the path, which are initially identical.

The next line binds this single datum/subject to the newly created path for this drag gesture:

active = svg.append("path").datum(d),

It is important to keep in mind, that the variable d contains a reference to the actual data bound to the path. When modifying d you are in fact modifying the datum which was bound beforehand. This happens because you are dealing with a reference.

That said, the next steps are pretty straightforward as during the gesture, the array of coordinates is kept up to date by adjusting coodinate values or pushing new values to the array. Again, this is actually modifying the datum bound to the path.

When finally setting the line generator line on the path's d attribute

active.attr("d", line);

the generator will be called implicitly passing in the new value of the datum bound and, thus, generate the path following the pointer's movement during the gesture.