D3.jsバウンディングボックスの問題 - ティック機能を強制的に

Question

私はD3を学ぶ過程にあり、私は解決できないような問題に遭遇しました。

私はrvecianaのCircles bouncing inside a rectangle exampleのコードを使って作業していますが、これはそのぎりぎりの部分を取り除いています。

Iからダニ機能で円の属性を交換するとき、私は、しかし、容器の底に沈んにノード/円を取得しようとしていますし、箱の内側にバインドさ：

.attr("cx", function(d) {return d.x;}) 
.attr("cy", function(d) {return d.y;}); 

に：

.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }); 
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 

ノード/円は、容器内の0,0なく、ランダムに配置され、相互作用し又は移動させることができません。

私のコードはhttps://jsfiddle.net/Glitttttch/p93qyh99/3/です.2行のコメントアウトがあります。

function tick(e) { 
force.alpha(0.1) 
circle 
.each(gravity(e.alpha)) 
.each(collide(.5)) 
.attr("cx", function(d) {return d.x;}) 
.attr("cy", function(d) {return d.y;}); 
//.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); }); 
//.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); }); 

}

正しくこれらの行を統合する方法上の任意の提案は非常に非常に高く評価されます。

Answer 1

コードでは、縮尺であるradiusを使用しています。これがNaN（SVG要素を元に戻す最も一般的な理由）が非常に多くなっている理由です。

ソリューションはちょうどd.radiusためradiusを変更する、シンプルである：ここで

.attr("cx", function(d) { 
    return d.x = Math.max(d.radius, Math.min(width - d.radius, d.x)); 
}) 
.attr("cy", function(d) { 
    return d.y = Math.max(d.radius, Math.min(height - d.radius, d.y)); 
}); 

は、あなたの更新フィドルです：[有界フォースレイアウト]についてボストックのコードによるとhttps://jsfiddle.net/gerardofurtado/03smjfo8/