小さい方の正方形を大きな正方形のグリッドにクラスタ化する方法

Question

正方形で作った正方形のグリッドを作成したいのですが、それにどれくらいの小さな正方形があるかによって適切なグリッドが作れます。

3x3または4x4または5x5のグリッドの完全な四角形の場合、または十分な四角形がない場合は、一番上の行が不完全である必要があります。

たとえば、10個の小さな四角形（4x4グリッドに必要な数より6少ない数）がある場合は、3x4グリッド（3行4列）を作成し、グリッドの上部に1つの正方形を追加します4行目にする。

私は、私が持っている四角形の数の平方根をとって、これを行うことができます。その価値をnumsquaresperrowと呼ぶことにする。

In 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の表示はなしです。

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--) { 
 
\t for (var k = 0; k < cols; k++) { 
 
\t \t if(number > 0){ 
 
\t \t \t data[i][k] = 1;//if number > 0 make it as 1 
 
\t \t } 
 
\t \t number--; 
 
\t } 
 
} 
 

 

 
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) { 
 
\t \t if (i ==0) 
 
\t \t \t column++; 
 
    return column * 10; 
 
    }) 
 
\t .style("fill", function(d){ 
 
\t \t \t return "red" 
 
\t }) 
 
.style("display", function(d){ 
 
    \t \t \t if (d == 0) 
 
\t \t \t \t return "none" 
 
\t \t \t else 
 
\t \t \t \t return "block" 
 
\t }) 
 
\t .style("stroke", function(d){ 
 
\t \t \t return "white" 
 
\t })

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