Question

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

我正在处理来自rveciana的Circles bouncing inside a rectangle example的一些代码，我已经剥夺了它的一些弹性。

我试图让节点/圆圈下沉到容器的底部并绑定到盒子的内部，但是，当我在tick函数中替换圆圈的属性时：

.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的{{1}}：

d.radius

这是您更新的小提琴：https://jsfiddle.net/gerardofurtado/03smjfo8/

D3.js边界框问题 - 强制刻度功能

1 个答案: