网格中的 d3 个正方形

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，这将是2，这是正确的。但是，您需要模运算（returns 除法的其余部分）以在 10 组之后换行。考虑单元格 2001，floor(2001/100) 将置于 20，尽管将模数放入，但 x 位置正确为 0。

x1 = Math.floor(i % 10)

x1 是 10x10 组中的 x 位置。这是除以 10 的余数的下限。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 个正方形

d3 squares in a grid

d3.js

grid

location

cells