Question

我遵循这些教程：

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/

但拖动功能闪烁圆圈。

虽然puzzlr.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会很好。

PS：如果你替换这一部分：

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')

它有效！（但这让我没有＆lt; g＆gt;包装＆lt; circle＆gt;和＆lt; text＆gt;，也没有＆lt; text＆gt;，我想这样做。）

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

0 个答案: