用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为例