D3.js D3部队布局的最大距离限制?

D3.js D3部队布局的最大距离限制?,d3.js,collision-detection,force-layout,D3.js,Collision Detection,Force Layout,我使用带有小负电荷的强制布局,以避免SVG元素彼此重叠。但是,我需要物品保持在其原始位置约20px的范围内。是否有任何方法限制项目移动的总净X/Y距离 每个SVG元素代表一个公交车站,因此重要的是项目不要重叠,也不要远离其原始位置。在force布局本身中没有此选项,但您可以在处理勾选事件的函数中轻松做到这一点: force.on("tick", function() { nodes.attr("transform", function(d) { return "translate("

我使用带有小负电荷的强制布局,以避免SVG元素彼此重叠。但是,我需要物品保持在其原始位置约20px的范围内。是否有任何方法限制项目移动的总净X/Y距离


每个SVG元素代表一个公交车站,因此重要的是项目不要重叠,也不要远离其原始位置。

在force布局本身中没有此选项,但您可以在处理
勾选事件的函数中轻松做到这一点:

force.on("tick", function() {
  nodes.attr("transform", function(d) {
    return "translate(" + Math.min(0, d.x) + "," + Math.min(0, d.y) + ")";
  });
});
这会将位置绑定到(0,0)的右上角。显然,您也可以通过任何其他方式将其修改为绑定(可能使用嵌套的
Math.min
/
Math.max
)。您甚至可以通过将允许的位置范围存储在元素中并引用该元素来动态地实现这一点


有关使用此技术限制使用强制布局浮动的标签位置的示例,请参见。

有趣的是,我的问题应该更具体一些。在我的实现中,我没有移动SVG中包含的形状,而是使用CSS顶部和左侧偏移移动(小)SVG容器本身。虽然我可能会将顶部更改设置为Math.min(item.top,item.top+5),但放置相同的项不会同时移动到相同的边界吗?不确定您的意思——使用这种方法,您当然可以记录原始位置,并将任何力导向的移动限制在20x20框内。