D3 物理重力答案

【问题标题】：D3 physical gravityD3 物理重力
【发布时间】：2012-09-16 08:05:25
【问题描述】：

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

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

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

提前致谢！

【问题讨论】：

单个 SVG 元素是图像吗？

标签： javascript d3.js physics gravity force-layout

【解决方案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)。

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

【讨论】：