附加以在D3中创建正方形网格时为x和y属性创建循环

Question

I'm making a grid of squares, where each square is linked to a datapoint.

I'm trying increment the y attribute value and reset the x attribute value after every 5 squares in a row. How do you create a loop for this?

Ideally it should allow for as many data points to be added so that after every 5 squares in a row, a new row is created.

Below is the setup:

 var svg = d3.select('svg'); var dataSet = [10, 20, 30, 40, 10, 20, 30, 40]; var rectangle = svg.selectAll('rect') .data(dataSet) .enter() .append('rect') .attr({ x:function(d, i){ if(i<5){ return i*60 + 5 }else{ } }, y:function(d, i){ d = 80 if(i<5){ return d }else{ return d+40 }}, width: 50, height: 50, fill: 'red' }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> <svg width="100%"></svg> 

JS fiddle: http://jsfiddle.net/jlw01/9yak00f6/

Answer 1

If I understand you correctly, you need something like the code below:

 var svg = d3.select('svg'); var dataSet = [10, 20, 30, 40, 10, 20, 30, 40, 10, 20, 30, 40, 10]; var rectangle = svg .attr('width', window.innerWidth) .attr('height', window.innerHeight) .selectAll('rect') .data(dataSet) .enter() .append('rect') .attr({ x:function(d, i){ return i % 5 * 60 // use modulo operator to set x coord }, y:function(d, i){ return Math.floor(i / 5) * 60 }, width: 50, height: 50, fill: 'red' }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script> <svg width="100%"></svg>