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作为示例

使用D3.js创建矩形图表

1 个答案: