Рисование квадратная матрица с использованием D3.js

Question

У меня есть некоторые данные, которые выглядят как [[30 элементов], [30 элементов], [30 элементов] ...] этот массив может содержать любое количество массивов из 1-31 элементов , Внутренние массивы всегда будут такими же, как и количество дней, которые будут обработаны. Каждый внутренний массив также будет иметь свою этикетку, поэтому он хотел бы как

A | 30 элементный массив
B | 30 элементный массив
C | 30 элемента массив

30 элемента массив будет просто SVG прямоугольников я рисовать на экране, так что на самом деле это будет выглядеть

A | прямое прямое прямое ... (1-31 rects)
B | прямое прямое прямое ... (1-31 rects)
C | Прямой прямой прямоугольный ... (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 на квадратной матрице?

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 и относительной влажности являются ширина и высота прямоугольников. Затем, вы можете создать матрицу данных:

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

Я бы порекомендовал вам прочитать How Selections Work. Кроме того, я написал небольшой jsfidlle с этим кодом: http://jsfiddle.net/pnavarrc/Sg3BY/1/