d3js：按特定顺序排列的多个条形图

Question

我想绘制多个条形图并使用d3js将它们排列在特定位置。基本上是这样的：

我得出个体条形图较早，但不知道如何绘制多个小棒图，并将它们如图所示的照片。

任何建议或链接将是有帮助的。

Answer 1

要创建如图所示的多个图表，您需要有一个数据结构，以便您计算图表的布局。数据结构可以是这样的：

var data = [ 
    {row: 0, col: 0, data: [{x: 1, y: 1}, {x: 2, y: 2}, ...]}, 
    {row: 0, col: 1, data: [{x: 1, y: 2}, {x: 2, y: 3}, ...]}, 
] 

然后，你将需要实现你的图表为reusable charts，因此您可以产生任意数量的图表，而无需复制代码并按照D3风格。假设你有一个可重复使用的图表barchart，你需要对它进行配置，为您的图表容器元素，并调用图表：

// Create and configure the barchars 
var chart = barchart() 
    .width(100) 
    .height(100); 

// Create the SVG element and set its size... 

// Create a group for each element in the data array 
var gcharts = svg.selectAll('g.chart').data(data) 
    .enter().append('g') 
    .attr('class', 'chart'); 


// Translate the groups using the row and column 
gcharts.attr('transform', function(d) { 
    return 'translate(' + 100 * d.row + ',' + d.col + ')'; 
}); 

// Create the charts, using the data bound to each selection. 
gcharts.call(barchart); 

问候，