d3: как визуализировать простую двумерную матрицу?

Question

Я застрял в попытке связать двумерные данные в d3. Я хочу отобразить матрицу зеленых квадратов. Я строю такую ​​матрицу:

var size = 10; 
dataset = []; 
for(var y = 0; y<size; y++){ 
    var tempData = [size]; 
    for(var x = 0; x<size; x++){ 
     tempData[x] = 5; 
    }; 
    dataset.push(tempData); 
}; 

Я не уверен, как правильно привязывать данные. Я вроде понимаю, что Майк Босток tutorial on nested selections, но он привязывает матрицу фиксированного размера к уже существующим элементам. Как использовать enter() для создания новых прямоугольников? Вот как я попытался применить совет учебника, чтобы сначала связать внешние, а затем внутренние массивы .. не удивил, что он не работает, но я также не знаю, куда идти отсюда.

svg.selectAll("rect") 
    .data(dataset) 
    .selectAll("rect") 
    .data(function (d,i) {return d;}) 
    .enter() 
    .append("rect") 
    .attr("x", function(d,i){ 
      return i*20}) 
    .attr("y", function(d,i){ 
      return i*20;}) 
    .attr("height", 15) 
    .attr("width", 15) 
    .attr("fill", "green"); 

Answer 1

Есть две проблемы. Сначала у вас есть второй .selectAll() сразу после первого .data(), что означает, что вы будете работать с выбором обновления. Это пусто, так как в DOM нет элементов для начала. Вы должны работать на выбор ввода вместо (и это хорошая практика, чтобы использовать g элементы здесь для первого уровня):

svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("g") 
    .selectAll("rect") 
    .data(function (d,i) {return d;}) 

Во-вторых, вы кладете прямоугольники по диагонали (то же координаты х и у) , так что даже если имеется правильное количество элементов rect, вы не видите их всех, потому что они перекрываются. Чтобы исправить, вам нужно взять индекс в родительской группе во внимание для одной из координат (с помощью secret third argument):

.append("rect") 
.attr("x", function(d,i){ 
     return i*20; 
}) 
.attr("y", function(d, i, j){ 
     return j*20; 
}) 

Полная демо here.