使用javascript和d3.js打印每行x个元素

我试图用d3.js打印每行x个矩形

        var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", function(d,i){ return i*5})
       .attr("y", function(d,i){ return i+1})
       .attr("width", 50)
       .attr("height", 50)

我知道我需要修改y属性，但我觉得我在盲目地改变值，直到我的矩形像这样打印出来

 [][][][][][]
 [][][][][][]
 [][][][][][]

而不是

      [[][[][[[][[][[][[]

或

我能了解一下如何提出相应的公式进行打印吗

谢谢你

像这样的事情

    var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
   .attr("x", function(d,i){ return (i%5) * 60})
   .attr("y", function(d,i){ return Math.floor(i / 5) * 60})
   .attr("width", 50)
   .attr("height", 50)

您的矩形的高度和宽度为50，因此60应该确保它们之间有一些间隙。50将导致没有间隙和少于50个重叠矩形

---

%是我们想要的除以5后的余数。

不是真的，它确实显示了一些积极的结果，但它仍然在一行中打印所有矩形，或者在一个点中打印多个矩形。是的！这就是我想要的，稍加修改。你可能很容易就想到了哈哈，但是我可以问一下你是怎么想到你的解决方案的，这样我下次就可以理解了吗？我只是回答了这样一个问题非常感谢你的解释：）

    var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
   .attr("x", function(d,i){ return (i%5) * 60})
   .attr("y", function(d,i){ return Math.floor(i / 5) * 60})
   .attr("width", 50)
   .attr("height", 50)