D3 Hexbin 六边形网格，为什么行与列的偏移不可预测？

Question

我使用 D3 显示六边形网格。您可以放大和缩小，并且它会更改图块大小。有时行会偏离正常状态，我不知道如何预测或控制它。

我希望行和列之间的相互关系始终是可预测的。否则我无法正确找到相邻的单元格。

这很难解释，所以我会提供图像。创建网格的代码在这里：

https://github.com/snellcode/insulam/blob/main/src/services/map.ts

我尝试过更改图块大小、地图大小等...它似乎也可能因计算机或浏览器而异。到目前为止，我无法找到使其保持一致的模式。

我想知道是否有一些数学可以应用。我想象以某种方式移动每隔一行来纠正它。我也无法让它发挥作用。

不知何故，我认为必须进行一些数学计算来确定行与列的对齐方式。我只需要一种方法来使其可预测。

演示站点：https://insulam.got.solar/

Answer 1

我通过检测第一个绘制的行是偶数还是奇数解决了这个问题。这使得它可靠，因为我可以纠正它。我仍然想知道这些变体之一是否比另一个更正确。例如，如果我正在绘制地图，我想确保位置之间以正确的关系显示。