使用D3.js创建矩形图

Question

我正在尝试制作d3 javascript，该javascript创建一个矩形，其颜色取决于数据集。 所有矩形彼此相邻，例如：

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

我的脚本可以为所有数据创建矩形，但是它会像这样溢出：

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

如何为d3脚本创建width和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数）

看到这个小提琴作为例子