D3物理引力

Question

我正在尝试使用D3库设计物理引力模拟，但是进展不顺。'布局'API参考中提到可以通过正的“电荷”参数来实现物理引力，但我不确定这该如何实现。

目前我正在尝试实现一个包含多个可变重和大小的矩形的单个SVG元素，它们以不同的速度上升并最终超出视口--其重量将定义它们上升的速度。（基本上，我只是想实现来自视口顶部以外的全局引力。）

是否有可行的方法符合D3力布局？我只是在寻找概念解决方案，但示例和代码片段也会很有帮助。

提前感谢！

- stephenkao

---

单个SVG元素是一张图片吗？ - Jeff Bootsholz

Answer 1

以下是几个想法：

1. You can directly modify vertical position of node in tick event handler:

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

   You need to set force.gavity(0) for this approach.

2. Or you can use force.gravity: it pulls nodes towards layout center, you can specify svg transfromation to shift layout center above viewport

- Ivan Solntsev