使用D3.js绘制一个方阵

Question

我有一些数据，看起来像这样 [ [30个元素], [30个元素], [30个元素]... ]，这个数组可以包含任意数量的1-31个元素的数组。内部数组将始终相同，因为它们代表将要处理的天数。每个内部数组也会有其自己的标签，所以它看起来像这样：

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

30个元素的数组只是我在屏幕上绘制的svg矩形，所以实际上它看起来像这样：

A | 矩形 矩形 矩形 矩形... (1-31个矩形) B | 矩形 矩形 矩形 矩形... (1-31个矩形) 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 的方法？

- micc0

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/

- Pablo Navarro