D3.js 如何有效地将小正方形聚集到更大的正方形网格中

我想构建一个由正方形组成的正方形网格，这样根据我有多少个小正方形，我可以构建合适的网格

这适用于完美正方形（3x3、4x4或5x5网格）的情况，或者当没有足够的正方形时，因此顶行需要不完整

例如，如果我有10个小正方形（比4x4网格少6个），我将构建一个3x4网格（3行4列），并在网格顶部添加一个正方形，形成第四行

看起来我要做的是取我拥有的正方形数的平方根，然后求和。我们将该值称为numsquaresperrow

在D3中。然后我需要像这样附加矩形：

//var numsquaresperrow determined already. 

chartmarks.selectAll(".squares")
    .data(function(d) { return d.values; })
    .enter().append("rect")
      .attr('class','squares')
      .attr('width','8px')
      .attr('height',8px')
      .attr('x',(numsquaresperrow * (width + offset)) / 2)
      .attr('y',function(d,i) {
          // use a modulo to break to the new line once the iter passes numsquaresperrow
       });

---

有没有更有效的方法来实现这一点并尝试使用网格？

我希望我了解您的问题

这是我的尝试

我制作了一个行和列的数组。 如果行有1，则显示矩形，在0中显示为无

var数=10//根据您的选择更改此选项。
//制作数据
var cols=Math.ceil（Math.sqrt（数字））
var数据=[]；
对于（变量i=0；i=0；i--）{
对于（var k=0；k0）{
数据[i][k]=1；//如果数字>0，则将其设为1
}
数字--；
}
}
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//制作svg
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//制作矩形网格
var列=0；
svg
.selectAll（“cols”）
.数据（数据）
.输入（）
.附加（“g”）
.selectAll（“rect”）
.数据（功能（d）{
返回d；
})
.输入（）
.append（“rect”）
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“x”，函数（d，i）{
返回i*10
})
.attr（“y”，函数（d，i）{
如果（i==0）
列++；
返回列*10；
})
.样式（“填充”，功能（d）{
返回“红色”
})
.样式（“显示”，功能（d）{
如果（d==0）
返回“无”
其他的
返回“块”
})
.样式（“笔划”，功能（d）{
返回“白色”
})

---

你的例子不清楚你有10个正方形，你做了3行*4列网格，但3*4是12，那么你为什么要做第4行呢？你能把你想要的东西截屏吗？我想我是说没有足够的小正方形来做大正方形。但我想尽可能接近。