Drucken x Anzahl von Elementen pro Zeile mit Javascript und d3.js

Question

Ich versuche, mit d3.js x Anzahl der Rechtecke pro Zeile drucken

 var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect") 
     .attr("x", function(d,i){ return i*5}) 
     .attr("y", function(d,i){ return i+1}) 
     .attr("width", 50) 
     .attr("height", 50) 

Ich weiß, ich brauche das y-Attribut zu ändern, aber ich das Gefühl, ich bin blind Werte zu ändern, bis meine Rechtecke drucken wie

[][][][][][] 
[][][][][][] 
[][][][][][] 

statt

 [[][[][[[][[][[][[] 

oder

 [] 
     [] 
      [] 
      [] 

Kann ich einen Einblick bekommen, wie man mit einer Formel zum Ausdrucken kommt?

Danke

Answer 1

So etwas ...

var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect") 
    .attr("x", function(d,i){ return (i%5) * 60}) 
    .attr("y", function(d,i){ return Math.floor(i/5) * 60}) 
    .attr("width", 50) 
    .attr("height", 50) 

Ihre Rects sind Höhe und Breite 50, so sollte der 60 einige Lücken zwischen ihnen gewährleisten. 50 ergibt keine Lücken und weniger als 50 überlappende Rechtecke.

% ist die remainder operator wir den Rest nach der Division durch 5.