D3.jsで矩形グラフを作成する

Question

データセットに依存する矩形を作成するd3 javascriptを作成しようとしています。四角形のすべてが互いに等に隣接している：

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

私は私のスクリプトは、私のすべてのデータのための四角形を作成するために動作するようになったが、それは次のように溢れた：

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

がどのように幅を作成することができますそして私のD3スクリプトの高さのプロパティを、それは私のスクリプトです。ここよりのような

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

に見えるよう：

<script> 
     //for whatever data set 
     var data = []; 
     //Make an SVG Container 
    var svgContainer = d3.select("body").selectAll("svg") 
           .data(data) 
           .enter().append("svg") 
           .attr("width", 38) 
           .attr("height", 25); 

    //Draw the rectangle 
    var rectangle = svgContainer.append("rect") 
        .attr("x", 0) 
        .attr("y", 5) 
        .attr("width", 38) 
        .attr("height", 25); 
    </script> 

Answer 1

xとyのプロパティを変更する必要があります。

.attr("x", function(d, i) { 
    return 5 + (i%itemPerLine) * widthRect; 
}) 
.attr("y", function(d, i) { 
    return 5 + Math.floor(i/itemPerLine) * heightRect; 
}) 

を例

として this fiddleを見る（itemPerLineはライン当たり rectの数です）