javascript - 使用 D3.js 绘制方阵

Question

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

一个 | 30个元素数组
乙 | 30个元素数组
丙 | 30元数组

30 个元素的数组将只是我在屏幕上绘制的 svg 矩形，所以它看起来真的像

一个 | rect rect rect rect...(1-31 个矩形)
乙 | rect rect rect rect...(1-31 个矩形)
丙 | rect rect rect rect...(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));
}

要实际绘制矩形，您可以将数据数组(内部数组)的元素绑定(bind)到 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 + ')';
    });

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

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

我建议您阅读 How Selections Work .另外，我用这段代码写了一个小的 jsfidlle:http://jsfiddle.net/pnavarrc/Sg3BY/1/