D3 Force Layout的最大距离限制？

Question

我正在使用带负电荷的力布局，以避免SVG元素相互叠加。但是，我需要将物品保持在原始位置的约20px范围内。有没有办法限制物品移动的总净X / Y距离？

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

Answer 1

在强制布局本身中没有这个选项，但是你可以在处理tick事件的函数中很容易地做到这一点：

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）。您甚至可以通过使用元素存储允许的位置范围并引用它来动态地执行此操作。

有关使用此技术限制使用力布局浮动的标签位置的示例，请参阅here。