D3物理重力

Question

我正在尝试用D3库设计一个物理引力模拟,但我没有太多运气.在"布局" API参考状态,身体重心可通过积极的"一把手"参数来实现的,但我不确定这是如何工作的.

我现在试图实现的是一个SVG元素,它包含多个可变加权和大小的rects,它们以不同的速度上升,最终走出视口 - 它们的权重将定义它们上升的速度.(基本上,我只是试图从视口顶部实现全局引力.)

是否有可行的方法按照D3力布局执行此操作？我只是在寻找概念解决方案,但也很感谢示例和代码片段.

提前致谢!

Answer 1

这是几个想法：

1. 您可以直接在tick事件处理程序中修改节点的垂直位置：

   force.on("tick", function(e) {
       nodes.forEach(function(o, i) {
           o.y -= o.weight / 30;
        });
   
        node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
   });
   

   您需要为此方法设置force.gavity(0)。

2. 或者您可以使用force.gravity：它将节点拉向布局中心，您可以指定 svg 转换以将布局中心移至视口上方