Question

我试图了解Mike Bostok的方格：https://bl.ocks.org/mbostock/1009139

我想知道他如何放置细胞的位置，我认为以下部分说明了这一点。但我不能确定它意味着什么。

.attr("x", function(i) {
        var x0 = Math.floor(i / 100) % 10, x1 = Math.floor(i % 10);
        return groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);
      })
.attr("y", function(i) {
        var y0 = Math.floor(i / 1000), y1 = Math.floor(i % 100 / 10);
        return groupSpacing * y0 + (cellSpacing + cellSize) * (y1 + y0 * 10);
      })

你可以帮我理解这部分吗？基本上，如何设置网格中单元格的位置。就我而言，我想根据数据中变量的比例设置位置。但是一些普遍的意义也将是一个很大的帮助。

另外，最困难的是使用％。谁能让我知道为什么需要它？

非常感谢，

Answer 1

让我们将其分解为x。首先，i是单元格的索引。它将从0 .. N开始，其中N是单元格数减去1。

var x0 = Math.floor(i / 100) % 10

x0是单元格所在的10x10组的x位置。由于每组包含100个单元格，因此它是索引的最低点除以100.因此，请考虑单元格201，＆＃ 39; ll是2，这是正确的。但是，您需要模运算（返回除法的余数），以便在10个组之后进行换行。考虑单元格2001，地板（2001/100）将放在20，然后将模数放入，并且它对于x位置正确为0。

x1 = Math.floor(i % 10)

x1是10x10组中的x位置。这是除以10的余数的最低值。这是因为我们在每组中有10列。再次，如果你检查我们的201和2001年的测试，他们都会在第二列中正确结束。

最后总体位置：

groupSpacing * x0 + (cellSpacing + cellSize) * (x1 + x0 * 10);

其中包含(pixel group spacing * x0) + (pixel cell spacing + pixel cell size) * ((x0 * 10) + x1)

每组的像素间距
每个单元格的单元格大小和间距
x组位* 10（因为每组10列）
加上每组中的位置

网格中的d3个正方形

1 个答案: