d3.js如何制作“无限”背景网格？

Question

我正在尝试在背景中使用网格执行可拖动和可缩放的图形，类似于：http://bl.ocks.org/mbostock/6123708

但是，如果您开始移动示例中的背景，您可以非常快速地看到网格的结尾。 在d3.js中是否有可能使这个背景网格变得无限？

Answer 1

正如我在评论中提到的，您所要做的就是使缩放偏移成为框大小的模数。这是一个简单的Fiddle，没有溢出，所以你可以看到行为中的行为。重要的是将d3.event.translate更改为：

d3.event.translate[0]%(boxSize*d3.event.scale)+","+d3.event.translate[1]%(boxSize*d3.event.scale)

x mod boxsize和y mod boxsize的偏移量，其中boxsize按缩放比例缩放。

要使转换无缝，您只需将线条绘制在可见帧之外的boxWidth。这个 Fiddle显示了这一点，您可以看到它是一个“无缝”网格，其绘制仅略大于查看框架（您可以通过将最小缩放更改为0.5并缩小来确认）。

在这个注意事项上，如果你想允许用户缩小小于原始比例，你必须用最小缩放来划分数组的范围，并且同样地将线的宽度和高度除以相同的值。因素。