D3对象矩阵

时间:2017-08-31 20:49:28

标签: javascript html d3.js matrix

我正在尝试使用D3在简单的html中显示对象矩阵。

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'数据元素填充它们。

1 个答案:

答案 0 :(得分:0)

我能够用小提琴解决问题。 http://jsfiddle.net/2g5xumdh/

var a = require('./../scenarios/a.js');
a.foo();