javascript - Drawing A square Matrix using D3.js - Stack Overflow

I have some data that looks like[[30 elements], [30 elements], [30 elements]... ] this array can co

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. The inner arrays will always be the same as the represent the number of days that will be processed. Each inner array will also have its on label, so it would like like

A | 30 element array
B | 30 element array
C | 30 element array

The 30 element Array will just be svg rects i draw on the screen, so really it will look like

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

naturally I'm new to d3.js so I'm having problems and I think its because I don't understand how to use data() properly. Right now I'm doing something like this

.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

so the first term is the number of elements for an inner array and the second term is the number of inner arrays.

I'm not using scales because I could not position the rects properly, so I guess I don't understand those either. to give you and idea on what I'm doing to position them for the x and y attribute I'm doing stuff like this.

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)

so as you can imagine this is a mess can anyone help me with a simpler way and tell me the proper way to use .data on a square matrix?

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. The inner arrays will always be the same as the represent the number of days that will be processed. Each inner array will also have its on label, so it would like like

A | 30 element array
B | 30 element array
C | 30 element array

The 30 element Array will just be svg rects i draw on the screen, so really it will look like

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

naturally I'm new to d3.js so I'm having problems and I think its because I don't understand how to use data() properly. Right now I'm doing something like this

.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

so the first term is the number of elements for an inner array and the second term is the number of inner arrays.

I'm not using scales because I could not position the rects properly, so I guess I don't understand those either. to give you and idea on what I'm doing to position them for the x and y attribute I'm doing stuff like this.

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)

so as you can imagine this is a mess can anyone help me with a simpler way and tell me the proper way to use .data on a square matrix?

Share Improve this question asked Jun 4, 2013 at 12:57 micc0micc0 3353 silver badges11 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 13

I think that generating the data before trying to draw the 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 the data matrix:

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

To actually draw the rectangles, you can bind the elements of the data array (the inner arrays) to groups in svg, and translate the groups based in the row number, adding a small margin:

// 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 the rectangles, adjusting the horizontal position only (the vertical position was already set in the containing group). Here, you need to bind the inner array elements (the group datum) 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 reend you to read How Selections Work. Also, I wrote a small jsfidlle with this code: http://jsfiddle/pnavarrc/Sg3BY/1/

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1743630573a4481288.html

相关推荐

  • javascript - Drawing A square Matrix using D3.js - Stack Overflow

    I have some data that looks like[[30 elements], [30 elements], [30 elements]... ] this array can co

    20小时前
    30

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信