D3.js边界框问题-强制勾选功能

Question

我正在学习D3，遇到了一个似乎无法解决的问题。

我正在处理一些来自rveciana的Circles在矩形示例中反弹的代码，我已经去掉了它的一些弹性。

我正试图让节点/圆下沉到容器的底部并绑定到盒子的内部，然而，当我从替换勾选函数中的圆的属性时

.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/，并注释掉了两行新行。

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元素的最常见原因(。

解决方案很简单，只需将radius更改为d.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/