（D3.js）如何以多行显示数据

Question

我对 D3.js 来说还很陌生，需要帮助。当我在体内添加圆圈时，所有圆圈都在一行中。我知道 translate 必须对此做些事情，但我无法弄清楚。

假设我有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});