D3矩陣的對象

Question

我想顯示一個矩陣的對象在簡單的HTML使用D3。

let matrix = [ 
    [{firstName:'John', lastName:'Doe'},{firstName:'Jane',lastName:'Doe'}], 
    [{firstname:'Henry',lastname:'Smith'},{firstName:'Jane',lastName:'Smith'}], 
    [{firstname:'Fred',lastname:'Fox'}] 
] 

請注意，該矩陣可能不具有相同的列數。這是D3的問題嗎？

我試圖把它們作爲一個列表中的一個集合，如果div元素。以下this模式。到目前爲止，我有

let container = d3.select('#myContainerDiv'); 

let rows = container.selectAll('div'); 
rows.data(matrix); 
rows.enter().append('div'); 

let cols = rows.selectAll('span'); 
cols.data(function(row){ 
    return row;}, function(row,i){ 
    return row[i].lastName+row[i].firstName;}); 

cols.enter().append('span') 
    .classed('myClass',true) 
    .html(function(cell){ 
    return cell.lastName+', '+cell.firstName; 
}); 

它創建'row'div元素，但不會用'span'數據元素填充它們。

Answer 1

我能用小提琴解決問題。 http://jsfiddle.net/2g5xumdh/

var my = d3.select('#my'); 

var dataSet = [ 
    [{firstName:'John', lastName:'Doe'},{firstName:'Jane',lastName:'Doe'}], 
    [{firstName:'Henry',lastName:'Smith'},{firstName:'Jane',lastName:'Smith'}], 
    [{firstName:'Fred',lastName:'Fox'}] 
]; 

var rows = my.selectAll('div') 
    .data(dataSet) 
    .enter() 
    .append('div'); 

var col = rows.selectAll('span').data(function(d,i){ 
    return d; 
},function(d,i){ 
return d.lastName+d.firstName; 
}); 

col.enter().append('span').html(
function(d,i){return '• '+ d.firstName + ' '+ d.lastName+' ';} 
);