Javascript D3 rect+；颜色不显示

我正在玩弄D3来创建一个热图。我正在创建NxN方块，我想改变和调整它的颜色。但是，只有第一个方块显示为蓝色，根据html检查器，其余的方块显示在那里并设置了颜色，但它们不会显示在页面上

    size = 30;
    length = myJSON.length;
    numRows = length /2;
    numCols = length / 2;

    var svg = d3.select("div#heatchart").append("svg").attr("width",size).attr("height",size);

    svg.selectAll("rect").data(myJSON).enter().append("rect").attr("x",function(d,i){
        var x = Math.floor(i%numRows) * (size+1);
        return x;
    }).attr("y",function(d,i){
        var y = Math.floor(i/numCols) * (size+1);
        return y;
    }).attr("width",function(d,i){
        return size;
    }).attr("height",function(d,i){
        return size;
    }).attr("fill", function(d,i) {
        return "rgb(0, 0, 255)";
    }); 

---

您需要一个svg组元素（

-这不是真的请参见编辑）

修改使其看起来像这样

var svg = d3.select("div#heatchart")
            .append("svg")
            .append("g")
            .attr("width", size)
            .attr("height", size);

e、 g

编辑

---

这个例子是有效的，但不是因为上面所说的原因。attr函数不再影响svg元素，因此它会获得一个默认大小，该大小足以显示所有元素。在这种情况下，应用于组的宽度和高度属性实际上没有效果。请参阅@jshanley更完整、更正确的解决方案。

之所以只看到一个正方形，是因为您已将

元素的尺寸设置为等于变量

size

，该变量仅为30。正在绘制其他正方形，但它们不在svg文档的范围内，因此不可见

一旦您解决了这个问题，您仍然会遇到布局问题，因为您是基于将

length

一分为二来设置行数和列数的。要制作一个NxN正方形，您真正想要做的是将行数和列数基于

长度的平方根。如果数据长度不是一个完美的正方形，可以使用
Math.ceil
进行取整。试着这样做：

var size = 30;
var n = myJSON.length;
var numRows = Math.ceil(Math.sqrt(n)),
    numCols = numRows;

然后，您可以根据需要显示的行数和列数设置svg的大小：

var svg = d3.select('div#heatchart').append('svg')
  .attr('width', size * numCols)
  .attr('height', size * numRows);

最后，将它们排列成正方形，将填充设置为蓝色：

svg.selectAll('rect')
  .data(myJSON)
  .enter().append('rect')
    .attr('x', function(d,i) { return (i % numCols) * size; })
    .attr('y', function(d,i) { return Math.floor(i / numRows) * size; })
    .attr('width', size)
    .attr('height', size)
    .attr('fill', 'blue');

就是一个例子。
数据，没有什么特别的。如您所见，我现在使用索引I。您不需要一个组来附加多个svg元素。正如问题中提到的OP，元素出现在元素检查器中。它们不显示的原因是它们被绘制在svg元素的边界之外。看看我的答案。@jshanley。我看你是对的。我检查了我的解决方案，并插入了对其工作原理的解释。El Dude你应该接受JShanley的答案而不是我的。如果不可能，我可以删除我的答案。谢谢