使用D3.js创建矩形图表 [英] Creating a rectangle chart with D3.js

问题描述

我想制作一个d3的javascript，创建一个矩形，其颜色取决于一个数据集。所有矩形彼此相邻，如：

I am trying to make a d3 javascript that creates a rectangle whose color depends on a data set. All of the rectangles are adjacent to each other like:

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

但是它溢出如下：

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

如何为我的d3脚本创建宽度和高度属性，使其看起来更像

How can I create width and height properties for my d3 script so it looks more like

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

这是我的脚本：

    <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>

推荐答案

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 每行）

(itemPerLine is the number of rect per line)

请参见这个小提示作为示例

这篇关于使用D3.js创建矩形图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！