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

（itemPerLine 是每行rect 的数量）

以this fiddle为例