javascript - d3.js 如何制作 "infinite"背景网格？

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实际显示了这一点，您可以看到它是一个“无缝”网格，绘制的网格仅比 View 框架稍大(您可以通过将最小缩放比例更改为 0.5 并缩小来确认这一点)。

关于这一点，如果你想让用户缩小到小于原始比例，你必须将数组的范围除以最小缩放比例，同样将线的宽度和高度除以相同的比例因素。