如何有效地将小方块聚类成更大的方格网格

Question

我想构建一个由正方形组成的正方形网格，这取决于我有多少个小方块，我构建了适当的网格。

这适用于完美正方形的情况--3x3，或4x4或5x5网格 - 或者当没有足够的正方形时，所以顶行需要不完整。

因此，例如，如果我有10个小方块（比4x4网格需要的少6个），我将构建一个3x4网格（3行，4列），并在网格顶部添加一个方块做第4排。

似乎我通过取平方数，然后进行综合来做到这一点。我们将numsquaresperrow称为该值。

在D3中。然后我需要像这样附加我的矩形：

//var numsquaresperrow determined already. 

chartmarks.selectAll(".squares")
    .data(function(d) { return d.values; })
    .enter().append("rect")
      .attr('class','squares')
      .attr('width','8px')
      .attr('height',8px')
      .attr('x',(numsquaresperrow * (width + offset)) / 2)
      .attr('y',function(d,i) {
          // use a modulo to break to the new line once the iter passes numsquaresperrow
       });

有没有更有效的方法来做这个并尝试网格？

Answer 1

我希望我理解你的问题。

这是我的尝试。

我制作了一系列行和列。 如果行有1则显示矩形，0显示为无。

＆＃13;

＆＃13;

var number = 10; //change this as per your choice.
//make the data
var cols = Math.ceil(Math.sqrt(number))
var data = [];
for (var i = 0; i < cols; i++) {
  var d = new Array(cols).fill(0);//make an array of 0
  data.push(d)
}

for (var i = cols -1; i >= 0; i--) {
	for (var k = 0; k < cols; k++) {
		if(number > 0){
			data[i][k] = 1;//if number > 0 make it as 1
		}
		number--;
	}
}


var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

//make svg
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   //make rectangle grid
var column = 0;
svg
  .selectAll("cols")
  .data(data)
  .enter()
  .append("g")
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("width", 10)
  .attr("height", 10)
  .attr("x", function(d, i) {
    return i * 10
  })
  .attr("y", function(d, i) {
		if (i ==0)
			column++;
    return column * 10;
  })
	.style("fill", function(d){
			return "red"
	})
 .style("display", function(d){
 			if (d == 0)
				return "none"
			else 
				return "block"
	})
	.style("stroke", function(d){
			return "white"
	})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

＆＃13;

＆＃13;