如何在d3.js中排列行中的矩形(How to arrange rectangles in rows in d3.js)

 我有100个矩形 ，我想在10x10中排列。 我已经能够安排一行和一列，但我正在安排其他九个。 这是js小提琴： 
 
 码： 
 
var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
   var rectWidth = ContainerWidth / 20
   console.log(ContainerWidth)
   var svgContainer = d3.select("#boxy")

   var rectangle = svgContainer.selectAll("rect")
     .data((function() {
       var arr = []
       for (var i = 1; i <= 100; i++) {
         arr.push(i)
       }
       return arr
     }()));

   var rectangle = rectangle.enter()
     .append("rect")
     .style("stroke", "black")
     .style("fill", "none")
     .attr("x", function(d, i) {
       if (i % 10 == 0) {
         return 5
       } else {
         return (i*45) + 3;
       }

     })
     .attr("y", function(d, i) {
       if (i % 10 == 0) {
         return i*4.2
       }

     })
     .attr("width", rectWidth)
     .attr("height", rectWidth);
 
 结果看起来应该是这样的  

I i have 100 rectangles that I want to arrange in 10x10. I have been able to arrange one row and column but I am stuck at arranging the other nine. Here is js fiddle: 
 
code:
 
var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
   var rectWidth = ContainerWidth / 20
   console.log(ContainerWidth)
   var svgContainer = d3.select("#boxy")

   var rectangle = svgContainer.selectAll("rect")
     .data((function() {
       var arr = []
       for (var i = 1; i <= 100; i++) {
         arr.push(i)
       }
       return arr
     }()));

   var rectangle = rectangle.enter()
     .append("rect")
     .style("stroke", "black")
     .style("fill", "none")
     .attr("x", function(d, i) {
       if (i % 10 == 0) {
         return 5
       } else {
         return (i*45) + 3;
       }

     })
     .attr("y", function(d, i) {
       if (i % 10 == 0) {
         return i*4.2
       }

     })
     .attr("width", rectWidth)
     .attr("height", rectWidth);
 
the result should look something like this 

原文：https://stackoverflow.com/questions/41465866