Drawing a square matrix using D3.js

Question

I have some data that looks like [[30 elements], [30 elements], [30 elements] ...] this array can contain any number of arrays of 1-31 elements. Internal arrays will always be the same as the number of days to be processed. Each inner array will also have its own label on the label, so it would like to

A | 30 array elements
B | 30 array elements
C | 30 array of elements

The 30 element array will just be svg rects, which I draw on the screen, so it will look like

A | direct direct direct ... (1-31 rects)
B | direct direct direct ... (1-31 rects)
C | direct direct direct ... (1-31 rects)

Naturally, I am new to d3.js, so I have problems, and I think because I do not understand how to use data() correctly. I'm doing something like this right now

 .data(d3.range( d3.range(d[0].length).length) * d3.range(d.length).length ) //this is to know how many rectangles I need to draw 

therefore, the first member is the number of elements for the internal array, and the second is the number of internal arrays.

I do not use the scales because I could not locate the corrections correctly, therefore, I think I do not understand this either. to give you an idea of ​​what I am doing, to place them for the x and y attributes, I am doing such things.

 daysProcessed = d[0].length uniqueLabels = d3.range(d.length).length x = svgwidth/(daysProcessed +xmargin) * i%dayProcessed +xmargin // i is from .attr("x",function(d, i) y = rectSize *(i%uniqueLables) 

since you can imagine that this is a mess, can someone help me in a simpler way and tell me the correct way to use .data on a square matrix?

Answer 1

I think that generating data before trying to draw rectangles is a better approach. You can use d3.range to generate the data matrix:

 // Setup var width = 300, height = 300, div = d3.select('#chart'), svg = div.append('svg') .attr('width', width) .attr('height', height), rw = 95, rh = 95; 

Where rw and rh are the width and height of the rectangles. Then you can create a data matrix:

 var data = []; for (var k = 0; k < 3; k += 1) { data.push(d3.range(3)); } 

To draw rectangles, you can bind the elements of the data array (internal arrays) to groups in svg and translate the groups based on the line number by adding a small field:

 // Create a group for each row in the data matrix and translate the // group vertically var grp = svg.selectAll('g') .data(data) .enter() .append('g') .attr('transform', function(d, i) { return 'translate(0, ' + (rh + 5) * i + ')'; }); 

Then for each group you can add rectangles by adjusting only the horizontal position (a vertical position has already been set to the containing group). Here you need to bind the internal elements of the array (group binding) to each rectangle:

 // For each group, create a set of rectangles and them to the inner array // (the inner array is binded to the group) grp.selectAll('rect') .data(function(d) { return d; }) .enter() .append('rect') .attr('x', function(d, i) { return (rw + 5) * i; }) .attr('width', rw) .attr('height', rh); 

I would advise you to read "How Choice Works." In addition, I wrote a small jsfidlle with this code: http://jsfiddle.net/pnavarrc/Sg3BY/1/