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

Question

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

我正在使用 rveciana 的 Circles bouncing inside a rectangle example 中的一些代码，我已经剥夺了它的一些弹性。

我试图让节点/圆圈下沉到容器的底部并绑定(bind)到盒子的内部，但是，当我从以下位置替换刻度函数中圆圈的属性时:

.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)); 
});

这是您更新的 fiddle :https://jsfiddle.net/gerardofurtado/03smjfo8/