Javascript d3.v4.js奇怪的拖动行为

我将学习以下教程：

http://www.puzzlr.org/force-graphs-with-d3/ (for the basics)

http://codepen.io/anon/pen/amqrWq?editors=0010 (to add new circles dynamically)

http://bl.ocks.org/mbostock/6123708 (for the zoom beha)

我设法创造了这个：

https://jsfiddle.net/8qvx7mke/

但是拖动函数在圆圈中闪烁

而puzzler.org示例使用

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

在动画中

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 + ')';
});

（尽管d.fx和d.fy在代码的其他任何地方都没有使用…）

bl.ocks.org示例使用：

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

拖动时，圆似乎被定位了两次，但我找不到原因

如果你能解释为什么一个使用d.x和d.y，而另一个使用d.fx和d.fy，那就太好了

注：如果替换此部分：

var node_enter = d3_nodes.enter().append('g');

node_enter.append('text').text(function(d) {
    return 'naba naba ' + d.id;
});

node_enter
    .append('circle')

为此：

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

它起作用了！（但这样我就没有来包装和，也没有，我希望这样）