7

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

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

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

一个 | rect rect rect rect... (1-31 rects)
B | rect rect rect rect... (1-31 rects)
C | rect rect rect rect... (1-31 rects)

我自然是 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 的正确方法吗？

4

1 回答 1

12

我认为在尝试绘制矩形之前生成数据是一种更好的方法。您可以使用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);

我建议您阅读选择工作原理。另外，我用这段代码写了一个小jsfiddle：http: //jsfiddle.net/pnavarrc/Sg3BY/1/

于 2013-06-04T13:34:44.227 回答