Javascript 如何在d3中创建多个正方形？

我有一个交互式页面，我需要使用d3在页面上显示一些正方形，计数如下：1、4、5、16、107、465和1745。我不想多次复制和粘贴这个SVG片段

如何在d3中生成这些正方形

index.html

---

这是最短最干净的d3代码，符合我从你的问题中理解的。我已经对它进行了评论，所以如果有什么不合理的地方，请告诉我：

//矩形数 var数据=[1,4,5,16,1074651745]； var squareDim=10，//正方形的像素尺寸 宽度=400， 高度=squareDim*d3.maxdata+squareDim；//根据我的方块最大值，我会有多高 var svg=d3。选择“body” .append'svg' .attr'width'，width .attr'height'，height；//创建我的svg节点 var行=0； svg.selectAll'rectGroup' .数据 进来 .append'g'//为每个数据点创建一个组 .选择All'rect' .datafunctiond{ return d3.range；//这将创建一个[1，2，3…N]数组，其中N是rect数据中的一个数据 }//这是一个子选择，它允许您定义子数据集 进来 .append'rect' .attr'width'，squareDim .attr'height'，squareDim .attr'x'，函数d，i，j{ 返回data.indexOfj.length*squareDim+2； }//确定x位置 .attr'y'，功能正常{ 返回d*squareDim+2；//和y } .样式“填充”、“c62828”；

---

除了多次尝试复制和粘贴正方形外，我还看了这个示例，但我不清楚他是如何创建正方形网格的：http://bl.ocks.org/eesur/3fc83ddc4c060e6bd43eDo 你想让正方形排列成网格吗？在您链接到的代码中，您对哪些特定部分感到困惑？这是非常直截了当的d3代码，所以我想到的任何答案我都会重复这个例子…@马克本身不在网格中。我只想在页面上按顺序显示这么多的方块：1、4、5、16、107、465和1745。我很好奇为什么它会变成这样？有可能把它们分成30行或100行吗？@AndrewNguyen，它的形状是这样的，因为我告诉它：。形状由x和y属性确定。data.indexOfj.length*squareDim+2；基本上是说，我在哪个数据上，现在移动超过22个像素，开始下一列。是的，你可以随意安排，这只是数学问题。试一试，当你遇到具体问题时再来。我个人认为你不应该回答这个问题。它太模糊了，迄今为止没有做出任何努力，具体问题也没有突出。正如你所说，从你所理解的。我主张对这个问题置之不理，或者至少不要提供帮助vampires@Ian，你可能是对的。不过，我希望一点示例代码能够启发OP，并推动他们制定出自己的解决方案。相反，我只是得到了更多的要求…当数组中的两个整数相同时，似乎会出现问题，这是因为indexOf会在数组中找到第一个出现的值。

<svg width="50" height="50">
    <rect x="0" y="0" width="10" height="10" fill="#c62828">
</svg>