使用D3.js绘制方形矩阵

Question

我有一些看起来像[[30个元素],[30个元素],[30个元素] ......的数据...这个数组可以包含1-31个元素的任意数量的数组.内部数组将始终与表示将要处理的天数相同.每个内部数组也都有它的on标签,所以它就像

A | 30个元素数组
B | 30个元素数组
C | 30个元素数组

30元素阵列只是我在屏幕上绘制的svg rects,所以它看起来真的很像

A | 直肠直肠...(1-31 rects)
B | 直肠直肠...(1-31 rects)
C | 直肠直肠...(1-31岁)

自然我是d3.js的新手,所以我遇到了问题而我认为是因为我不明白如何data()正确使用.现在我正在做这样的事情

.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

所以第一项是内部数组的元素数,第二项是内部数组的数.

我没有使用秤,因为我无法正确定位,所以我想我也不理解它们.给你一个想法,我正在做什么来定位他们的x和y属性我正在做这样的事情.

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)

所以你可以想象这是一团糟,任何人都可以用更简单的方式帮助我,并告诉我在方阵上使用.data的正确方法吗？

Answer 1

我认为在尝试绘制矩形之前生成数据是一种更好的方法.您可以d3.range用来生成数据矩阵:

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

其中rw和rh是矩形的宽度和高度.然后,您可以创建数据矩阵:

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

要实际绘制矩形,可以将数据数组的元素(内部数组)绑定到svg中的组,并根据行号转换组,添加一个小的边距:

// 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 + ')';
    });

然后,对于每个组,您可以添加矩形,仅调整水平位置(垂直位置已在包含组中设置).在这里,您需要将内部数组元素(组基准)绑定到每个矩形:

// 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);

我建议你阅读选择如何工作.另外,我用这段代码写了一个小jsfidlle:http://jsfiddle.net/pnavarrc/Sg3BY/1/