Javascript D3物理重力

Javascript D3物理重力,javascript,d3.js,physics,gravity,force-layout,Javascript,D3.js,Physics,Gravity,Force Layout,我正试图用D3库设计一个物理引力的模拟,但我运气不好。物理引力可以通过一个正的“电荷”参数来实现,但我不确定这是如何实现的 我现在尝试实现的是一个SVG元素,它包含多个可变权重和大小的矩形,它们以不同的速度上升,最终离开视口——它们的权重将定义它们上升的速度。(基本上,我只是尝试从视口顶部以外实现全局引力。) 根据D3部队布局,是否有可行的方法?我只是在寻找概念性的解决方案,但示例和代码片段也很受欢迎 提前谢谢 以下是一些想法: 您可以在勾选事件处理程序中直接修改节点的垂直位置: force.o

我正试图用D3库设计一个物理引力的模拟,但我运气不好。物理引力可以通过一个正的“电荷”参数来实现,但我不确定这是如何实现的

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

根据D3部队布局,是否有可行的方法?我只是在寻找概念性的解决方案,但示例和代码片段也很受欢迎

提前谢谢

以下是一些想法:

  • 您可以在勾选事件处理程序中直接修改节点的垂直位置:

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

  • 单个SVG元素是图像吗?