用D3.js創建一個矩形圖表

Question

我正在嘗試創建一個d3 javascript，它創建一個矩形，其顏色取決於數據集。所有矩形的是彼此相鄰，如：

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

我得到了我的腳本工作創造我所有的數據矩形，但它溢出，如：

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

如何創建寬度和我的D3腳本height屬性，所以它看起來更像

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

這裏是我的腳本：

<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; 
}) 

（itemPerLine是rect每行的數量）

見this fiddle爲例