javascript - d3.v4.js weird dragging behavior -

i'm following these tutorials:

http://www.puzzlr.org/force-graphs-with-d3/ (for basics)  http://codepen.io/anon/pen/amqrwq?editors=0010 (to add new circles dynamically)  http://bl.ocks.org/mbostock/6123708 (for zoom beha) 

and manage create this:

https://jsfiddle.net/8qvx7mke/ 

but drag functions flickering circle.

while puzzlr.org example use

d.fx = d3.event.x; d.fy = d3.event.y; 

and in animation

d3_nodes.attr('transform', function(d) {     d.x = math.max(d.r, math.min(svg_width  - d.r, d.x));     d.y = math.max(d.r, math.min(svg_height - d.r, d.y));     return 'translate(' + d.x + ',' + d.y + ')'; }); 

(although d.fx , d.fy aren't used anywhere else in code...)

the bl.ocks.org example use:

d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 

it looks circle being positioned twice when dragging, couldn't find why.

if explain why 1 uses d.x , d.y, while other uses d.fx , d.fy great.

ps: if replace section:

var node_enter = d3_nodes.enter().append('g');  node_enter.append('text').text(function(d) {     return 'naba naba ' + d.id; });  node_enter     .append('circle') 

with this:

var node_enter = d3_nodes     .enter()     .append('circle') 

it works! (but leaves me no < g> wrapping < circle> , < text>, , no < text> also, , have way).