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

問候，