(D3.js) Как показать данные в несколько строк

Question

Я довольно новичок в D3.js и мне нужна помощь. Когда я добавляю круги в теле, все они находятся в одной строке. Я знаю, что перевод имеет отношение к этому, но я не могу понять это.

Допустим, у меня 15 кругов. Как я могу сделать новую строку после каждого пятого круга? Есть ли способ отображения данных в виде «матричного дисплея»?

Спасибо

var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var circles = svg.append("g")
              .attr("transform", "translate(" + barWidth + ",2)")
              .selectAll("circle")
              .data(unsortedArray)
              .enter().append("circle") 

  circles.attr("id", function(d) {return "circle" + d})
              .attr("transform", function(d, i) {return "translate(" + (x(i) - barWidth) + ",0)"})
              .attr("r",function(d,i){return d});