Javascript 将圆排成行

我试图获取一个长度为50的数组，并控制当数据用d3绑定到这些圆时，这些圆是如何附加的。对于50个圆，我需要5行10列的圆。我能想到的最好的方法是下面的片段：

var-margins={top:20，bottom:300，left:30，right:100}；
var高度=600；
var宽度=900；
var totalWidth=宽度+边距。左+边距。右；
var totalHeight=高度+边距。顶部+边距。底部；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
var circData=新数组（50）；
var-rowMarker=1；
graphGroup.selectAll（'circle'）
.数据（circData）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d，i）{return i*30}）
.attr（'cy'，函数（d，i）{
如果（i%10）{
rowMarker+=1；
}
返回行标记*30；
})
.attr（'r'，10）
.样式（“填充”、“灰色”）
您的代码的问题是

if (i%10)

。。。除第一个
i
值（即零）和10的倍数外，所有值都将
true

但是，除此之外，你的方法似乎不必要地复杂。您只需设置最大列数

var maxColumn = 10;

。。。然后对
x
和
y
值使用模运算符：

.attr('cx', function(d, i) {
    return (i % maxColumn) * 30
})
.attr('cy', function(d, i) {
    return (~~(i / maxColumn) % maxColumn) * 30
})

以下是更改后的代码：


var页边距={
前20名，
底数：300，
左:30,，
右：100
};
var高度=600；
var宽度=900；
var totalWidth=宽度+边距.left+边距.right；
var totalHeight=高度+页边距.top+页边距.bottom；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
var circData=新数组（50）；
var maxColumn=10；
graphGroup.selectAll（'circle'）
.数据（circData）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d，i）{
返回值（i%maxColumn）*30
})
.attr（'cy'，函数（d，i）{
返回（~（i/maxColumn）%maxColumn）*30
})
.attr（'r'，10）
.样式（“填充”、“灰色”）