javascript - D3 物理重力

Question

我正在尝试使用 D3 库设计物理重力模拟，但我运气不佳。“布局”API 参考声明物理重力可以通过正“电荷”参数实现，但我不确定这将如何工作。

我目前正在尝试实现的是一个单一的 SVG 元素，它包含多个以不同速度上升的可变权重和大小的矩形，最终离开视口——它们的权重将定义它们上升的速度。（基本上，我只是试图从视口顶部之外实现全局引力。）

有没有可行的办法按照D3的兵力布局来做到这一点？我只是在寻找概念性的解决方案，但示例和代码片段也很受欢迎。

提前致谢！

Answer 1

这里有几个想法：

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

   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 转换以将布局中心移动到视口上方